Question

我想在选中“全选”复选框时选中所有复选框。我已经阅读了SO上的各种线程，但无法获得预期的o / p。

相关问题： - Select all checkboxes with jQuery

这是我尝试过的。

<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');
    }
});

Answer 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);

});

$（”。天）。改变（函数（）{

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

}）

FIDDLE DEMO

Answer 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

Answer 3

最接近的是父树而不是下一个或以前的兄弟姐妹，你可以使用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');
    }
});

Answer 4

如果您不想修改标记，也可以使用此选项。的 DEMO Fiddle

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

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

OR

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

如果取消选中日期，以下是取消选择全选的代码。

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

Answer 5

这是一个简单的例子

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

OR

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

全部

Answer 6

在select_all选中

时，请尝试以下选中所有复选框

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

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

$('.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); 
     } 
 });

选中all all后，选中所有复选框

6 个答案:

HTML：

JQUERY：