3

我做了一个复选框选中/取消选中。

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 事件相同的工作，但没有工作。我哪里错了。

4

3 回答 3

2

我认为您只需要这个：您不需要传递所有参数并附加内联 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.
        }
    });
});

演示

于 2013-06-01T17:54:40.560 回答
1

您的选择器错误：

.check input[type="checkbox"]

上面选择checkbox具有 class 祖先的任何类型的输入.check。它会匹配这个：

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

它应该是：

input.check[type="checkbox"]
于 2013-06-01T17:47:35.597 回答
0

你在这里关闭了字符串$('.check input[type='checkbox']')，你应该使用双引号$('.check input[type="checkbox"]')

于 2013-06-01T17:46:03.137 回答