需要使用主复选框选中和取消选中所有复选框答案

【问题标题】：all checkboxes need to be checked and unchecked with the main checkbox需要使用主复选框选中和取消选中所有复选框
【发布时间】：2013-04-28 14:39:26
【问题描述】：

谁能帮我解决这个问题？

我有两个divs。在一个div 中，我有一个名为allcheck 的复选框，而在另一个div 中，我有一个名为outcheck 的复选框。如果我选中multiple，则都需要选中，如果我取消选中multiple，则所有都应该取消选中。输入无线电是allcheck 的类。

$('.inputradio').click(function(){

    $("INPUT[name='outCheck']").each(function () {
        if (allCheck.checkbox== true) {//multi check is checked
            this.checked = true;
        } else {
            this.checked = false;
        }
    });
});

HTML

这是主复选框的div

<div id="actions"><div id="box">
<ul><li class="inputradio"><input name="allCheck" type="checkbox" ></li>
<li class="multiple"><a href="#" class="bt btleft">Multiple</a></li>

这是用于子复选框：

<ul><li id="outcheckbox"><input name="outCheck" type="checkbox"></li>

即使选中一个孩子，如果我们选中主复选框，都需要选中。我发布的代码只是反转检查。

【问题讨论】：

也发布 html 标记。这会有所帮助！
可能重复 stackoverflow.com/questions/7095039/…, stackoverflow.com/questions/3931622/…, stackoverflow.com/questions/4959703/…
请发布有问题的正确 html。从 cmets 很难读取。
哎呀对不起..我已经发布了

标签： javascript jquery html

【解决方案1】：

试试这个 -

$('input[name=allCheck]').click(function(){
   $("INPUT[name='outCheck']").prop('checked', this.checked);
});

这将在点击allCheck 时切换所有名称为outCheck 的复选框。

见demo

更新

查看更新的demo here

这按预期工作。如果手动选中所有复选框，则主复选框也会更改，反之亦然，如果未选中一个子复选框，则主复选框也未选中。

【讨论】：

非常感谢...它适用于所有人，但...如果选择或取消了所有外签，则主复选框不会更改：-/
更新后的演示可以正常工作..但是当集成到我的代码中时，它可以在第三次点击时工作..首先单独检查多重，然后取消选中，在第三次点击时检查所有外检

【解决方案2】：

试试这个：

var $ch = $("input[name='outCheck']").change(function() {
    $all.prop('checked', $ch.filter(':checked').length == $ch.length);
}),
$all = $('input[name=allCheck]').click(function () {
    $ch.prop('checked', this.checked);
});

http://jsfiddle.net/wKgZV/1/

这将根据选中的outcheck 复选框自动选择和取消选择主复选框。

【讨论】：

如果我在代码中添加它..如果我检查所有孩子，主复选框不会自动检查.. :(

【解决方案3】：

此代码实现了选择和取消选择所有复选框的功能

选择和取消选择

$(".select-all-checkbox").click(function () {
       $('input:checkbox').prop('checked', this.checked);
   });

如果取消选择一项，则按钮 CheckAll 为 UnCheck

$(".mainCheckboxClass")
        .click(
                function() {
                    if ($('input[class=mainCheckboxClass]:checked').length === $('input[class=mainCheckboxClass]').length)
                        $('.select-all-checkbox').prop("checked", true);
                    else
                        $('.select-all-checkbox').prop("checked", false);
});

【讨论】：