Question

我一直在使用bootstrap表来使用kendo数据源从数据库中获取数据。因此，为了使其更具交互性，我使用了一个复选框来同时执行操作。

我想用一个复选框删除所有条目。我已阅读有关使用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>

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

所以我这样做 -

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

    </script>

仍然没有结果。救命啊！

Answer 1

尝试将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 2

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

选中所有复选框不起作用

4 个答案: