使用jQuery实现全选/取消全选复选框

Question

我已经制作了一个复选框全选/全不选的功能。

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

- Ajay Gopal Shrestha

---

你的 jq 选择器中，内部引号不应该是双引号吗？$('.check input[type="checkbox"]')。 - Xeon

抱歉我发布错了。 - Ajay Gopal Shrestha

如果传递给checkAll函数的参数值不依赖于回调执行的结果，那么传递参数的目的是什么？如果您的函数始终期望相同的值，请将它们存储在函数内部。 - paperstreet7

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

- PSL

---

@AjayGopalShrestha，欢迎您。尽量避免在标记中使用内联事件处理程序。同时，请使用prop而不是attr。 - PSL

我只是想为不同的复选框集重复使用相同的代码行，而无需一遍又一遍地编写相同的代码。 - Ajay Gopal Shrestha

@AjayGopalShrestha 如果稍加调整，这应该可以在那种情况下工作。如果您只是将您的HTML粘贴到一个fiddle上，我可以尝试帮忙，看看不同的设置如何显示... - PSL

我现在没有我的代码。只是为我的工作构建一些基本功能。正在处理由我的前辈们编写的定制jquery函数的一些问题。顺便说一句，非常感谢。今天我学到了一些新东西。 - Ajay Gopal Shrestha

@PSL 如果“全部”复选框的类别被补充了另一个样式类（在我看来这并不是罕见的情况），那么这将会出现问题。最好使用 $(this).hasClass("all")，因为我们已经在使用 [tag:jQuery]。 - zsawyer

Answer 2

你的选择器是错误的：

.check input[type="checkbox"]

上面选择了任何具有祖先类为 .check 的 checkbox 类型的输入。它将匹配以下内容：

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

it should be:

input.check[type="checkbox"]

- Xeon

Answer 3

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

- Misa Lazovic

---

我第一次发布时弄错了。 我已经再次编辑了这个问题。 - Ajay Gopal Shrestha