Master Checkbox to Check/Uncheck Associated DIV

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>

Ah, and by default you should see all the content DIV´s – Nuno Bentes Oct 29 '12 at 10:32 — Nuno Bentes, Oct 29 '12 at 10:32

score 0 · Accepted Answer · edited May 23 '17 at 10:34

0

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

edited May 23 '17 at 10:34

Community

1
1

answered Oct 29 '12 at 10:33

Tats_innit

33,991
10
71
77

Thanks a lot for your reply! Almost there... now if you uncheck an sub checkbox the Ckeck All checkbox should be disabled too!!! How can we do that? :) – Nuno Bentes Oct 29 '12 at 10:44
@Legues No worries, Glad it helped! 2 mins will fix it now `:)` jsfiddle is taking awful lot of time let it load right in my machine and I will flick you the demo `:)` ! – Tats_innit Oct 29 '12 at 10:45
@Legues Done `:)` http://jsfiddle.net/hGbdH/1/ - I have made very very minor changes so that less code can be written and you can do your stuff easily, rest hope demo will help the cause `:)` – Tats_innit Oct 29 '12 at 11:06
Problem now is, with Check All checked/unchecked should show/hide all Div´s. Ah, and by default we should see all the Div´s – Nuno Bentes Oct 29 '12 at 11:24
Hey mate !!! It´s almost there. Now i need to see all the div´s. If i uncheck each checkbox, i won´t see any div, if i check Check/uncheck ALL it should show/hide all divs!! :) – Nuno Bentes Oct 29 '12 at 11:30
@Legues cooleos gimem few mins fiddle is again acting funny `:)` will flick another demo your way. – Tats_innit Oct 29 '12 at 11:33
The thing is, the Check/Uncheck checkbox i´s working but it´s not toogling the class hide to the div´s!! – Nuno Bentes Oct 29 '12 at 11:34
And if i uncheck one overlay, then if i do a check All, this will select all the checkboxes, but won´t show the div!! I think the problem now is something related with toggling the class hide!!! – Nuno Bentes Oct 29 '12 at 11:36
By the way, thanks a lot to al other who tried to help me!! :) – Nuno Bentes Oct 29 '12 at 11:51
@Legues yo! start accepting answers by ticking empty correct mark and it will turn to green, it will help you raise your accept ratio and your reputation. just an advise `:)` cheers! – Tats_innit Oct 29 '12 at 11:56
@Legues All good bruv! `:)` lol, make sure you sort out your old Questions as well! – Tats_innit Oct 29 '12 at 12:02

score 0 · Answer 2 · answered Oct 29 '12 at 10:44

try this:

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

To show all div's might want to use kind of this:

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

in $(document).ready

might be improved a little if you use class for all slave checkboxes; — Sergio, Oct 29 '12 at 10:45

score 0 · Answer 3 · answered Oct 29 '12 at 10:57

try this Demo

$("#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();

Master Checkbox to Check/Uncheck Associated DIV

3 Answers3