使用jQuery加载页面后检查所有复选框

Question

How to select all checkboxes while click on a checkbox after page load.

my html code is,

 <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>

Remaining checkboxes are displayed after a button click. And the code is,

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

my jquery code is,

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

This code is not working because I think the checkboxes are appearing after page load. How can I resolve this problem?

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

You can append your dynamic checkbox after #selectall click like below example. I add extra tr to your html to append this. You can see result on snippet.

  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>