Question

我需要能够点击按钮btn并选中所有复选框，然后再次单击它，它将取消选中所有复选框。但是我的下面的代码只会检查所有内容并取消选中一次。为什么它会停止工作？

<script>
$('document').ready(function(){
$("#btn").on("click", function () { 
       var $checkbox = $(".checkBoxClass");
       $checkbox.attr('checked', !$checkbox.attr('checked'));
 });
});

</script>
 <span id="btn">btn</span><br /><br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox1" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox2" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox3" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox4" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox5" />
        <br />

Answer 1

您期望!$checkbox.attr('checked')返回什么？因为$checkbox.attr('checked')返回'已检查'或没有。

你应该使用prop而不是attr，因为它是真实的/虚假的

$('document').ready(function(){
   $("#btn").on("click", function () { 
       var $checkbox = $(".checkBoxClass");
       $checkbox.prop('checked', !$checkbox.prop('checked'));
    });
});

所以现在!$checkbox.prop('checked')会返回true或false，您可以合法地致电!

Answer 2

怎么样......

$('#btn').on('click', function() {
    $('.checkBoxClass').each(function() {
        $(this).is(':checked') ? $(this).removeAttr('checked') : $(this).attr('checked','checked');
    });
});

选中全部并取消选中所有复选框

2 个答案: