Question

我已经勾选了checkall / uncheckall。

HTML

<div> Using Check all function </div>
<div id="selectCheckBox">
<input type="checkbox" class="all" onchange="checkAll('selectCheckBox','all','check','true');" />Select All
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 1
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 2
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 3
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 4
</div>

main.js

function checkAll(parentId,allClass,checkboxClass,allChecked){
    checkboxAll = $('#'+parentId+' .'+allClass);
    otherCheckBox = $('#'+parentId+' .'+checkboxClass);
    checkedCheckBox = otherCheckBox.filter($('input[type=checkbox]:checked'));
    if(allChecked=='false'){
        if(otherCheckBox.size()==checkedCheckBox.size()){
            checkboxAll.attr('checked',true);
        }else{
            checkboxAll.attr('checked',false);
        }
    }else{
        if(checkboxAll.attr('checked')){
            otherCheckBox.attr('checked',true);
        }else{
            otherCheckBox.attr('checked',false);
        }
    }
}

工作正常。但是当我有很多复选框时会变得笨重。我想通过使用jQuery而不是在每个复选框上放置onchange来做同样的工作。我尝试了不同的东西，但无法工作。我尝试了一个：

$('.check input[type="checkbox"]').change(function(e){
    checkAll('selectCheckBox','all','check','true');
});

与onchange事件做同样的工作但没有工作。我哪里出错了。

Answer 1

我认为你只需要这样：你不需要传递所有的参数并且附加了内联onchange事件。您可以简化代码。

$(function () {
    $('input[type="checkbox"]').change(function (e) {
       if(this.className == 'all')
       {
           $('.check').prop('checked', this.checked); //Toggle all checkboxes based on `.all` check box check status
       }
        else
        {
            $('.all').prop('checked', $('.check:checked').length == $('.check').length); // toggle all check box based on whether all others are checked or not.
        }
    });
});

Demo

Answer 2

你的选择器错了：

.check input[type="checkbox"]

Above选择具有类checkbox的祖先的任何类型为.check的输入。它符合这个：

<div class="check">
    <input type="checkbox".../> 
</div>

它应该是：

input.check[type="checkbox"]

Answer 3

您在此处关闭了字符串$('.check input[type='checkbox']')，而应使用双引号$('.check input[type="checkbox"]')

使用jQuery检查CheckAll / UncheckAll复选框

3 个答案:

Demo