jQueryでページを読み込んだ後にすべてのチェックボックスをチェック

Question

ページを読み込んだ後にチェックボックスをクリックしてすべてのチェックボックスを選択する方法。

私のhtmlコードは、

<table id="dealer_select_list" class="table table-bordered table-striped"> 
      <thead> 
       <tr> 
        <th>Id</th> 
        <th>Customer Name</th> 
        <th><input id="selectall" type="checkbox">Select All</th> 
       </tr> 
      </thead> 
      <tbody id="Dlist_cont"> 

      </tbody> 
     </table> 

残りのチェックボックスは、ボタンのクリック後に表示されます。私は、チェックボックスは、ページのロードの後に​​登場していると思うので、コードは、

$list .= "<td><input id='checkBox' class='checkbox' type='checkbox' value='{$dl['id']}'></td>"; 

私のjqueryのコードは、

$('#selectall').click(function() { 
    if (this.checked) { 
     $(':checkbox').each(function() { 
      this.checked = true; 
     }); 
     } else { 
     $(':checkbox').each(function() { 
      this.checked = false; 
     }); 
    } 
    }); 

このコードは動作していないされています。どうすればこの問題を解決できますか？

Answer 1

$(document).ready(function(){ 
 
    $('#selectall').click(function() { 
 
    
 
    $(":checkbox",$("#Dlist_cont")) 
 
     .prop("checked",this.checked? "checked":""); 
 
    
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="dealer_select_list" class="table table-bordered table-striped"> 
 
      <thead> 
 
       <tr> 
 
        <th>Id</th> 
 
        <th>Customer Name</th> 
 
        <th><input id="selectall" type="checkbox">&nbsp;&nbsp;&nbsp;Select All</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody id="Dlist_cont"> 
 
<tr><td>1</td><td>C1</td><td><input type="checkbox"></td></tr> 
 
<tr><td>2</td><td>C2</td><td><input type="checkbox"></td></tr> 
 
      </tbody> 
 
     </table>

Answer 2

あなたは、たとえば以下のような#selectallクリックした後、あなたの動的なチェックボックスを追加することができます。私はあなたのhtmlに余分なtrを追加してこれを追加します。スニペットで結果を見ることができます。

var $list = "<td><input id='checkBox' class='checkbox' type='checkbox' value='{$dl['id']}'>New one</td>"; 
 
$('#selectall').click(function() { 
 

 
    if (this.checked) { 
 
    $("#dealer_select_list #test").html('').append($list); 
 
     $(':checkbox').each(function() { 
 
      this.checked = true; 
 
     }); 
 
     } else { 
 
     $(':checkbox').each(function() { 
 
      this.checked = false; 
 
     }); 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="dealer_select_list" class="table table-bordered table-striped"> 
 
      <thead> 
 
       <tr> 
 
        <th>Id</th> 
 
        <th>Customer Name</th> 
 
        <th><input id="selectall" type="checkbox">Select All</th> 
 
       </tr> 
 
       <tr id='test'><tr> 
 
      </thead> 
 
      <tbody id="Dlist_cont"> 
 

 
      </tbody> 
 
     </table>