Question

I need help with a situation.

I have a situation where i need a master checkbox to check/uncheck all the other checkboxes.
Each checkbox has an .hide class associated so when i UNCHECk each checkbox, this will hide each associated content div.

Then if i uncheck for example one of the checkboxes, the master one has to be unchecked.

I have created an example what i need here – https://dl.dropbox.com/u/23044665/teste.html

Can anyone help me with this?

Thanks a lot in advance

My code is:

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>

Answer 1

Try this demo http://jsfiddle.net/fzMLr/ or your version like this: http://jsfiddle.net/p6hFD/

Updated: http://jsfiddle.net/KXcWv/3/

Rest should help :)

My old response here: checkbox check all option

Code

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

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

});
​

Sample

   $(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');
    });
});​