Question

我有以下代码。它使用LABEL元素检查页面上的所有复选框，该元素通常位于复选框的顶部。现在我如何使用相同的LABEL元素取消选中所有框？

jQuery(document).ready(function($) {

 var $checkBoxes = $('input[type="checkbox"]');

 $('label').click(function() {
   $checkBoxes.attr('checked', true);
 });
});

Answer 1

使用：

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

Answer 2

对于切换，您需要将状态存储在某处，例如data()：

jQuery(document).ready(function($) {
    var $checkBoxes = $('input[type="checkbox"]');

    $('label').on('click', function() {
        var check = !$(this).data('checked');
        $checkBoxes.prop('checked', check);
        $(this).data('checked', check);
    });
});

FIDDLE

Answer 3

您可以尝试以下内容：

var checked = 0;

$('label').click(function() {
   if(checked) {
       $checkBoxes.prop('checked', true);
       checked = 1;
   } else {
        $checkBoxes.prop('checked',false);
        checked = 0;
   }
 });

Answer 4

首先，使用.prop()代替.attr()。

此代码应该有效（未经测试）：

$checkBoxes.prop('checked', $checkBoxes.not(':checked').length ? true : false);

经过二读，我不确定这是不是你想要的。你想要一个“checkall”按钮，当你点击它时，如果未选中一个或多个复选框，它会检查所有其他取消选中全部或真正的“切换按钮”吗？

Answer 5

所有on或全部off。还有一个封闭装置，可以保持所有的范围。

$('label').click((function () {

   var state = false;

   return function () {
      $checkBoxes.prop('checked', state = !state);
   };
}()));

在jQuery中，如何使用元素检查和取消选中所有复选框？

5 个答案: