Jquery 选中/取消选中关联DIV的主复选框

我需要帮助解决一个问题

我需要一个主复选框来选中/取消选中所有其他复选框。 每个复选框都有一个关联的.hide类，因此当我取消选中每个复选框时，这将隐藏每个关联的内容div

然后，如果我取消选中其中一个复选框，则必须取消选中主复选框

我已经创建了一个我需要的示例-

有人能帮我吗

提前多谢

我的代码是：

jQuery

$(document).ready(function(){

    $("#overlay-1").change(function() {
        $(".overlay-1").toggleClass("hide", this.unchecked)
    }).change();

    $("#overlay-2").change(function() {
        $(".overlay-2").toggleClass("hide", this.unchecked)
    }).change();

    $("#overlay-3").change(function() {
        $(".overlay-3").toggleClass("hide", this.unchecked)
    }).change();

});

CSS

   .hide {display:none;}
   .overlay-1 {background-color:#333; color:#FFF;}
   .overlay-2 {background-color:#666; color:#FFF;}
   .overlay-3 {background-color:#999; color:#FFF;}
   .overlay-1, .overlay-2, .overlay-3 { padding:20px; margin-top:20px;}

HTML

    <div id="nav">
        <input type="checkbox" class="all" id="all" checked="checked"/> Check/Uncheck all<br />
        <input type="checkbox" name="overlay-1" id="overlay-1" checked="checked"> Overlay 1 <br/>
        <input type="checkbox" name="overlay-2" id="overlay-2" checked="checked"> Overlay 2 <br/>
        <input type="checkbox" name="overlay-3" id="overlay-3" checked="checked"> Overlay 3 <br/>
    </div>

    <div class="overlay-1">Overlay 1 Content</div>
    <div class="overlay-2">Overlay 2 Content</div>
    <div class="overlay-3">Overlay 3 Content</div>

选中/取消选中全部

覆盖1

覆盖层2

叠加3

覆盖1内容
覆盖2内容
覆盖3内容

尝试此演示或您的版本如下：

更新：

Rest应该有帮助

：）

我以前的回答是：

代码

$('input[name="hulk"]').click(function(){

          $(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',this.checked);

});
​

样本

   $(document).ready(function() {
    $hulk = $("#overlay-1,#overlay-2,#overlay-3");
    $hulk.change(function() {
        $("." + this.id).toggleClass("hide", !this.checked);
        if ($('.test:checked').length == $hulk.length) 
            $('.all').prop('checked', true);
        else $('.all').prop('checked', false);

    });

    $('.all').click(function() {
        $(this).nextAll('input[type=checkbox]').prop('checked', this.checked);
        $hulk.trigger('change');
    });
});​

试试这个：

    $('input[type="checkbox"]').change(function () {
        if ($(this).attr("id") != "all" && $(this).attr("checked") != "checked") {          
            $("#all").attr("checked", false);
        }           
    });

    $("#all").change(function () {
        var check = $("#all").attr("checked") == "checked" ? true : false;
        $('input[type="checkbox"]').each(function () {
            if ($(this).attr("id") != "all") {                  
                $(this).attr("checked", check);
            }
        });
    })

要显示所有div，可能需要使用以下类型：

    $('input[type="checkbox"]').each(function () {
        if ($(this).attr("id") != "all" && $(this).attr("checked") == "checked") {          
            $("." + $(this).attr("id")).show();             
        }           
    });

在$（文档）中。准备好了吗

$("#overlay-1").change(function() {
    $(".overlay-1").toggleClass("hide", this.unchecked)
}).change();

$("#overlay-2").change(function() {
    $(".overlay-2").toggleClass("hide", this.unchecked)
}).change();

$("#overlay-3").change(function() {
    $(".overlay-3").toggleClass("hide", this.unchecked)
}).change();

    $('#all').change(function(){
        $('div[class|="overlay"]').toggleClass("hide");   
        var is_checked = $("#all").attr("checked") == "checked" ? true : false;
        $('input:checkbox').attr("checked", is_checked);                        
    }).change();

---

啊，默认情况下，你应该看到所有的内容DIV’s感谢你的回复！快到了。。。现在如果你取消选中一个子复选框，那么所有复选框都应该被禁用！！！我们怎么能做到呢？：）@不用担心，很高兴它有帮助！2分钟就可以修好了。

：）

jsfiddle花了很多时间，让它直接加载到我的机器上，我会给你演示。

：）

@Legues Done

：）

-我做了非常非常微小的更改，这样可以编写更少的代码，并且您可以轻松地完成自己的工作，rest希望演示将有助于解决问题的原因

：）

现在的问题是，使用Check All checked/unchecked应该显示/隐藏所有Div。啊，默认情况下，我们应该看到所有的Div'sHey mate！！！快到了。现在我需要看看所有的部门。如果我取消选中每个复选框，我将看不到任何div，如果我选中check/uncheck ALL，它将显示/隐藏所有div！！：）如果您对所有从属复选框使用类，则可能会有所改进；