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

cqoc49vn 于 12个月前发布在 Java

关注(0)|答案(4)|浏览(124)

我的代码有问题。我试图点击按钮来检查所有的复选框，但没有工作。
这是我的代码。

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

我不知道问题是从哪里来的，但我猜一定是和身份证、名字或其他什么有关，使它停止工作。
你能告诉我正确的代码，我可以用它来检查和取消检查所有的复选框，当我点击一个按钮使用我的代码？

JavaScript

来源：https://stackoverflow.com/questions/51956533/how-to-check-and-uncheck-all-checkboxes

4条答案

按热度按时间

7fhtutme1#

有一件事要纠正的是，你有你的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);
    }
 });

赞(0）回复(0）举报 12个月前

xtupzzrd2#

你做错了很多事。
首先，你的HTML标签的顺序是错误的。您的文档应该以<html>开头，以</html>结尾：
因此，将您的文档更改为这样：

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

您还希望将脚本包含在<body>的底部，或者在侦听DOM就绪事件时，将脚本包含在<head>中。所以，调整你的<script>位置到这里：

<html>
    <body>
        // your content
        <script>
            // script here
        </script>
    </body>
</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);
        }
    });
});

赞(0）回复(0）举报 12个月前

nbysray53#

正如人们所说，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);
     }); 
 });

});

赞(0）回复(0）举报 12个月前

shyt4zoc4#

这是你的HTML代码。

<!-- Master checkbox to toggle all other checkboxes -->
<input type="checkbox" id="masterCheckbox"> Check All

<!-- Sample checkboxes with a common class -->
<input type="checkbox" class="checkbox"> Checkbox 1
<input type="checkbox" class="checkbox"> Checkbox 2
<input type="checkbox" class="checkbox"> Checkbox 3

这里我使用原始JavaScript-

// Get the master checkbox
var masterCheckbox = document.getElementById('masterCheckbox');

// Get all checkboxes with the class 'checkbox'
var checkboxes = document.querySelectorAll('.checkbox');

// Function to toggle all checkboxes based on the master checkbox state
function toggleCheckboxes() {
    checkboxes.forEach(function(checkbox) {
        checkbox.checked = masterCheckbox.checked;
    });
}

// Attach event listener to the master checkbox
masterCheckbox.addEventListener('change', toggleCheckboxes);

赞(0）回复(0）举报 12个月前

我来回答

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

4条答案

相关问题

热门标签

最新问答