如何在未选中子复选框的情况下选中主复选框

How to checked checkbox main when sub checkbox not checked?

本文关键字：复选框 情况下      更新时间：2023-09-26

子复选框未选中时，如何选中主复选框？

当复选框id="checkItem1"和id="checkItem2"以及id="checkItem3"未选中时，

我想自动选中复选框id="checkAll"，我该怎么做？

http://jsfiddle.net/peap/sydzL8Lc/11/

<input type="checkbox" id="checkAll" checked > Check All
<hr />
<input type="checkbox" id="checkItem1"> Item 1
<input type="checkbox" id="checkItem2"> Item 2 
<input type="checkbox" id="checkItem3"> Item3

你可以像下面的一样完成

$('input[id^="checkItem"]').change(function(){
    if($('input[id^="checkItem"]:checked').length===0)
        $('#checkAll').prop('checked',true);
})

DEMO

我对您需要的全部功能进行了JSFiddle，包括当用户单击checkAll时，如果checkAll被选中，所有框都将变为已选中，否则将变为未选中。此外，如果用户检查了所有这些内容，每个内容上都有一个on-change侦听器，用于侦听，并将checkAll更改为checked和backward。

HTML:

<input type="checkbox" id="checkAll"> Check All
    <hr />
    <div class='js-checkboxes'>
    <input type="checkbox" id="checkItem1"> Item 1
    <input type="checkbox" id="checkItem2"> Item 2 
    <input type="checkbox" id="checkItem3"> Item3
    </div>

Javascript：

$('.js-checkboxes > input').on('change', function() {
    var isAllChecked = true;
    $('.js-checkboxes > input').each(function() {
        if (!this.checked) {
            isAllChecked = false;
        }
    });
    if (isAllChecked) {
        $('#checkAll')[0].checked = true;
    } else {
        $('#checkAll')[0].checked = false;
    }
});
$('#checkAll').on('change', function() {
    if (this.checked) {
        $('.js-checkboxes > input').each(function() {
            this.checked = true;
        });
    } else {
        $('.js-checkboxes > input').each(function() {
            this.checked = false;
        });
    }
});

$("input[id^='checkItem']").change(function(){
   if(!$("#checkItem1").is(":checked") && !$("#checkItem2").is(":checked") && !$("#checkItem3").is(":checked"))
   {
      $("#checkAll").prop("checked",true)
   }
}

编辑：-演示

相关文章：