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

【问题标题】：Check all checkboxes after page load with jQuery使用 jQuery 加载页面后检查所有复选框
【发布时间】：2017-05-25 17:30:16
【问题描述】：

如何在页面加载后单击复选框时选择所有复选框。

我的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;
        });
    }
   });

此代码不起作用，因为我认为复选框在页面加载后出现。我该如何解决这个问题？

【问题讨论】：

显示你的 HTML ?
我在上面添加了html代码
你把你的代码放在 $(document).ready(funtion(){}) 中？

标签： jquery checkbox

【解决方案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>

【讨论】：

【解决方案2】：

您可以在#selectall 点击后附加您的动态复选框，如下例所示。我在您的 html 中添加了额外的 tr 以附加此内容。你可以在 sn-p 上看到结果。

 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>

【讨论】：