javascript - 全选复选框不起作用

Question

我一直在使用引导表使用剑道数据源从数据库中获取数据。因此，为了使其更具交互性，我使用了同时操作的复选框。

我想用一个复选框删除所有条目。我已阅读有关使用 jQuery 删除带有单个复选框的条目的信息。但问题是我在表中只有一个复选框，并且所有条目都是使用 kendo 数据源获取的。

如果我正在制造混乱，请参见此处-

<script id="template" type="text/x-kendo-template">
  <tr>
      <td> 
          <input type="checkbox" class="done" data-id="#= CID #" ></input>

      </td></tr>
</script>

<table>
<tr>
 <th style="width:10%;">
                        <input type="checkbox" />
                    </th>
</tr>
</table>

现在使用剑道数据源，我只有一列复选框。

所以我正在这样做-

<script type="text/javascript">
        $('.done').click(function (event) {
            if (this.checked) {
                // Iterate each checkbox
                $(':checkbox').each(function () {
                    this.checked = true;
                });
            }
        });

    </script>

而且还是没有结果。帮助！

Answer 1

<script type="text/javascript">
 $(document).ready(function(){   
     $('.done').click(function (event) {
        if ($(this).attr('checked')) {
            $('input:checkbox:not(".done")').each(function () {
                $(this).attr('checked', 'checked');
            });
          }
      });
});
</script>

尝试这个。它可能有效

Answer 2

尝试将 jQuery 代码包装在里面$(document).ready(function(){});或$(function(){});让它看到整个 DOM：

$(document).ready(function() {
    $('.done').click(function (event) {
        if (this.checked) {
            // Iterate each checkbox
            $(':checkbox').each(function () {
                this.checked = true;
            });
        }
    });
});

此外，您的 HTML 被包裹在script标签内，将其移到外面并删除多余'的，并且input标签不需要结束</input>标签：

<tr>
    <td> 
        <input type="checkbox" class="done" data-id="#= CID #" />
    </td>
</tr>

Answer 3

尝试这个：

$(function () {    
    $('.done').on('click', function(){
              // i comment this condition if you want selectall for checked or unchecked
              //if ($(this).is(':checked')){
                        $(':checkbox').prop('checked', this.checked);
              //}
    });
});

Answer 4

试试这个：

脚本

$(document).ready(function(){   
   $('.done').click(function (event) {
      $('.chkbxq').each(function () {
        $(this).attr('checked', flag);
      });
   });
});

HTML：

<table>
  <tr>
    <th style="width:10%;">
       <input type="checkbox" class="chkbxq" />
    </th>
  </tr>
</table>