如何选中和取消选中所有复选框

Question

我的代码有问题。 我正在尝试单击按钮以检查所有复选框，但是没有任何反应。

这是我的代码。

<body>
<html>

<input type="checkbox" id="chk_boxes1" name="chk_boxes1" class="delete_customer"  value="<?php echo $rowTrackers['id']; ?>" />
<br>

<input type="checkbox" id="chk_boxes1" name="chk_boxes1" class="delete_customer"  value="<?php echo $rowTrackers['id']; ?>" />
<br>


<input type="checkbox" id="chk_boxes1" name="chk_boxes1" class="delete_customer"  value="<?php echo $rowTrackers['id']; ?>" />
<br>

<button type="button" name="btn_checkall" id="btn_checkall">Check all</button>

</html>
</body>


<script>
$(document).ready(function(){

 $('#btn_checkall').click(function(){
    if($(this).prop('checked')){
      $('.chk_boxes1').prop('checked', true);
    }else{
      $('.chk_boxes1').prop('checked', false);
    }
 });


});
</script>

我不知道麻烦从哪里来，但是我想这与ID，名称或其他使它停止工作的原因有关。

当我单击与代码一起使用的按钮时，能否请您显示可用于检查和取消选中所有复选框的正确代码？

Answer 1

要纠正的一件事是，您的html标签后面有html标签。 html标记肯定应该是父标记。

除此之外，您似乎已将“ chk_boxes1”分配给了ID而不是类。 如果将它们更改为类，则应该可以正常工作：

<input type="checkbox" name="chk_boxes1" class="delete_customer chk_boxes1"  value="<?php echo $rowTrackers['id']; ?>" />
<br>
<input type="checkbox" name="chk_boxes1" class="delete_customer chk_boxes1"  value="<?php echo $rowTrackers['id']; ?>" />
<br>
<input type="checkbox" name="chk_boxes1" class="delete_customer chk_boxes1"  value="<?php echo $rowTrackers['id']; ?>" />
<br>

另外，您正在按按钮来确定已检查状态。 这也将使代码不起作用。 如果要更改状态，可以向按钮添加和删除类，也可以执行以下操作来检查复选框组：

$(document).ready(function(){

 $('#btn_checkall').click(function(){
    if ($('.chk_boxes1:checked').length == $('.chk_boxes1').length) {
      $('.chk_boxes1').prop('checked', false);
    }
    else {
      $('.chk_boxes1').prop('checked', true);
    }
 });

Answer 2

你那里出了很多问题。

首先，您的HTML标记顺序错误。 您的文档应以<html>开头并以</html>结尾：

因此，将您的文档更改为这样：

<html>
    <body>
        // your content
    </body>
</html>

而且，您还希望将脚本包括在<body>的底部，或者，当您正在侦听DOM ready事件时，请将脚本包括在<head> 。 因此，将您的<script>位置调整到此处：

<html>
    <body>
        // your content
        <script>
            // script here
        </script>
    </body>
</html>

关于主要问题，我建议进行以下更改：

HTML：

删除重复的ID。 ID对于每个元素而言都是唯一的。

<input type="checkbox" name="chk_boxes1" class="delete_customer"  value="<?php echo $rowTrackers['id']; ?>" />
<br>
<input type="checkbox" name="chk_boxes1" class="delete_customer"  value="<?php echo $rowTrackers['id']; ?>" />
<br>
<input type="checkbox" name="chk_boxes1" class="delete_customer"  value="<?php echo $rowTrackers['id']; ?>" />
<br>

jQuery的：

按名称而不是ID选中复选框：

$(document).ready(function() {
    $('#btn_checkall').click(function(){
        var $chk_boxes = $('input[name="chk_boxes1"]');
        if($chk_boxes.prop('checked')) {
            $chk_boxes.prop('checked', true);
        } else {
            $chk_boxes.prop('checked', false);
        }
    });
});

Answer 3

正如人们所说的，ID应该是唯一的：

$(document).ready(function(){

 //Use JQuery .on to attach event handler
 $('#btn_checkall').on('click', function(){
     //Get all checkboxes by class
     const $checkboxes = $('.delete_customer');
     //Use .each to iterate the checkboxes
     $checkboxes.each(function(){
         $(this).prop('checked', true);
     }); 
 });


});

如何选中和取消选中所有复选框

问题描述

3 个解决方案

解决方案1
2 已采纳 2018-08-21 20:55:56

解决方案2
1 2018-08-21 21:05:23

解决方案3
0 2018-08-21 20:57:37

如何选中和取消选中所有复选框

问题描述

3 个解决方案

解决方案1 2 已采纳 2018-08-21 20:55:56

解决方案2 1 2018-08-21 21:05:23

解决方案3 0 2018-08-21 20:57:37

解决方案1
2 已采纳 2018-08-21 20:55:56

解决方案2
1 2018-08-21 21:05:23

解决方案3
0 2018-08-21 20:57:37