Question

如果选中子复选框时如何选中复选框main？

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

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

<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

Answer 1

你可以像吼叫一样

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

DEMO

Answer 2

我对您需要的全部功能进行了JSFiddle，包括当用户点击checkAll时，所有框都会更改为选中checkAll是否已选中或不检查。此外，如果用户检查所有这些内容并将checkAll更改为已检查和向后，则每个人都可以使用更改侦听器进行侦听。

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

Answer 3

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

编辑： - DEMO

当未选中子复选框时，如何选中复选框main？

3 个答案: