Question

I have this Jquery:

$(document).ready(function() {
   $('#masterChecks input[type="checkbox"]').click(function() {
   var togClass=$(this).attr('class');
   if($(this).attr('checked')){

    //need to make sure all checkboxes for this class is checked, when the
    //master checkbox is checked.
    $('div.' + togClass ).css("display", "inline-block");
}
else
{
        //need to make sure all checkboxes for this class is unchecked, when the
    //master checkbox is checked.
    $('div.' + togClass ).css("display", "none");

}
});

});

I have Html with many divs, and many classes. There are many checkboxs. Now i am checking the mastercheckbox, which will hide the css of all attributes that have the same class as the checkbox. I also have a set of local checkboxes which do the same but only for the div they are in. I want the Jquery uncheck the local checbox with the same class when it is unchecked, and vice versa. here is the html struccture

<div id="masterChecks">
   // checbox here with class="sampleclass"
</div>
 <div class="sampleclass">
      //local checkbox here 
 </div>

it seems very straight forward , but cant get it to work,

ive tried some things like this:

 $('div.' + togClass + 'input[type="checkbox"]').attr('checked','checked');

can anyone help?

Answer 1

you can use the jquery function .is() to check the status of the checkbox and then use .each() function to cicle and set the status of all the checkbox with the same class to the one of the master:

$('#masterChecks input[type="checkbox"]').click(function(){
 var checkclass= $(this).attr('class');
if($(this).is(':checked'))
   $('div.' + checkclass + ' input[type="checkbox"]').each(function(){
       $(this).attr('checked', true);
   });
 else   
    $('div.' + checkclass + ' input[type="checkbox"]').each(function(){
        $(this).attr('checked', false);
   });
});

edit:
added jsfiddle of working code: http://jsfiddle.net/CFeam/2/