选中全选时选中所有复选框答案

【问题标题】：Check all checkboxes when select all is checked选中全选时选中所有复选框
【发布时间】：2014-07-14 20:00:54
【问题描述】：

我想在选中“选择所有”复选框后查看所有复选框。我已经阅读了关于 SO 的各种线程，但无法获得预期的 o/p。

这是我尝试过的。

<div class="row-fluid" id="set_alarm">
    <label class="checkbox inline"><input type="checkbox" id="select_all"><b>Select All</b></label><br>
    <label class="checkbox inline days"><input type="checkbox" id="Mon"><b>Mon</b></label>
    <label class="checkbox inline days"><input type="checkbox" id="Tue"><b>Tue</b></label>
    ......
    ......
</div>

jQuery

$('#select_all').change(function() {
    var checkboxes = $(this).closest('.days').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});

【问题讨论】：

Jquery "select all" checkbox的可能重复
看看我的答案，它会做你想做的事，当你选择另一个框时，它会取消选中“全选”框。

标签： jquery checkbox

【解决方案1】：

在子复选框上添加一个类并在一行中执行此操作：

HTML：

<div class="row-fluid" id="set_alarm">
    <label class="checkbox inline"><input type="checkbox" id="select_all"><b>Select All</b></label><br>
    <label class="checkbox inline days"><input type="checkbox" class="days" id="Mon"><b>Mon</b></label>
    <label class="checkbox inline days"><input type="checkbox"  class="days" id="Tue"><b>Tue</b></label>

</div>

JQUERY：

$('#select_all').change(function() {


        $('.days').prop("checked", this.checked);

});

$('.days').change(function(){

if($('input:checkbox:checked.days').length === $("input:checkbox.days").length)
{
    $('#select_all').prop("checked",true);
}
else
{
    $('#select_all').prop("checked",false);
}

})

FIDDLE DEMO

【讨论】：

效果很好，但是，如果我取消选中任何一天，那么“全选”选项也应该取消选中。
你必须在其中添加更多内容
我写了这个$('.days').change(function() { if (!($(".days").is(':checked'))){ $("#select_all").removeAttr('checked'); }
$('.days').change(function() { $('#select_all').attr("checked", this.checked); });使用它取消选中全选。
根据您的代码，选中所有日期后，应选中所有选项。但它没有按预期工作。

【解决方案2】：

您需要更多地概括您的代码，如果您只是尝试选择所有复选框，则在其他问题中存在一堆不需要的东西。

    $('#select_all').change(function() {
        if($(this).is(':checked')) {
            $("input[type='checkbox']").attr('checked', 'checked');
        } else {
            $("input[type='checkbox']").removeAttr('checked');
        }
    });
        $("input[type='checkbox']").not('#select_all').change( function() {
        $('#select_all').removeAttr('checked');
    });

DEMO

【讨论】：

【解决方案3】：

closest 用于父树而不是下一个或上一个兄弟姐妹，您可以使用 nextAll：

var checkboxes = $(this).parent().nextAll('.days').find(':checkbox');

$('#select_all').change(function() {
    var checkboxes = $(this).parent().nextAll('.days').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.prop('checked', true);
    } else {
        checkboxes.removeProp('checked');
    }
});

【讨论】：

【解决方案4】：

这是一个简单的例子

$('#select_all').click(function() {
  var c = this.checked;
  $(':checkbox').prop('checked',c);
});

或

$('#select_all').click(function() {
  $(':checkbox').prop('checked', this.checked);
});

就是这样

【讨论】：

【解决方案5】：

如果您不想修改标记，也可以使用它。 DEMO Fiddle

$('#select_all').change(function() {
    $('.days input[type="checkbox"]').attr("checked", this.checked);
});

$('.days input[type="checkbox"]').prop("checked", this.checked);

或

$('.days input[type="checkbox"]').attr("checked", this.checked);

如果您取消选中某一天，以下是取消选择全选的代码。

$('.days input[type="checkbox"]').change(function() {
        $('#select_all').attr("checked", this.checked);

});

【讨论】：

【解决方案6】：

当select_all被选中时，尝试在下面选择所有复选框

$('#select_all').change(function() {
   $('.days').prop("checked", $(this).is(':checked'));
});

并在未选中 days 复选框之一时取消选择 select_all。

$('.days').change(function() {
     if($(this).is(':checked')) 
     {     
       // check if all days checkbox checked then check select_all
       if($('.days').is(':checked').length == $('.days').length)
         $('#select_all').prop("checked", true); 
     }
     else
     {
        $('#select_all').prop("checked", false); 
     } 
 });

【讨论】：