0

.csv ファイルから読み取られるときに動的に作成される一連のチェックボックスがあります。一連のチェックボックスが作成された後、「すべて選択」という別のチェックボックスが追加されます。アイデアは、動的に作成される「すべて選択」チェックボックスをオンにすると、その上にあるすべてのチェックボックスがオンになるということです。各チェックボックスは、下のテキストエリア内に name 属性を配置するように設定されています。

csv ファイルから抽出した後の HTML の例を次に示します。

<div class="checkboxes">
   <input type="checkbox" class="article" name="Article 1" />Article 1 <br>
   <input type="checkbox" class="article" name="Article 2" />Article 2 <br>
   <input type="checkbox" class="select-all" name="select-all" />Select all
</div>
<textarea></textarea>

現在、記事のチェックボックスで.delegateを使用し、すべて選択してクリックイベントを登録しています

 //clicking dynamically created input.article
 $('div.checkboxes').delegate('input.article','click',function(){
     $('textarea').val($(this).attr('name') + '/n');  //adds 'name' attr and a linebreak
 });

 //clicking dynamically created select-all
 $('div.checkboxes').delegate('input.select-all','click',function(){
     $('div.checkboxes').find('input.article').prop('checked',true); //works to select all articles
 });

問題は、'select-all' ですべての記事のチェックボックスをチェックしても、実際には次の行が起動されないことです。

    $('textarea').val($(this).attr('name') + '/n');  //adds 'name' attr and a linebrea

name 属性がテキストエリア内に配置されていません。

ここでも、すべての記事のチェックボックスが「すべて選択」によってチェックされています。「クリック」イベントを「トリガー」するだけです。

テキストエリア内では、理想的にはこれが表示されます:

第1条

第2条

これはどのように達成できますか？

ご協力ありがとうございました。

解決済み:

  $('div.checkboxes').delegate('input.select-all','click',function(){

       if ($(this).is(':checked')){

      $('input.article[type=checkbox]').prop('checked',true);   
      $('input.article[type=checkbox]').each( function(){
        $(this).trigger('click');
      });
       }
  });

ヴィーレン・ダンク。

4

1 に答える 1

0

これらのことを行うには多くの方法がありますが、コードを簡単に変更すると次のようになります。

 //clicking dynamically created input.article
 $('div.checkboxes').delegate('input.article','click',addname);

function addname(){
     $('textarea').val($(this).attr('name') + '/n');  //adds 'name' attr and a linebreak
};

 //clicking dynamically created select-all
 $('div.checkboxes').delegate('input.select-all','click',function(){
     $('div.checkboxes').find('input.article').prop('checked',true); //works to select all articles
     addname();
 });

注意 - 多くの;s が抜けているように見えますが、これはコピーのタイプミスですか、それともコードに抜けていますか?

于 2013-03-16T15:15:56.203 に答える