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而不是类。如果将它们更改为类，则应该可以正常工作：

false

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

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

Answer 2

您那里出了很多问题。

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

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

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

您还希望将脚本包括在<body>的底部，或者，当您正在侦听DOM就绪事件时，请将脚本包括在<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 个答案: