Question

I need to use jQuery to hide a div until all five check boxes below are selected. I know how to do this for a single check box but not for multiple check boxes.

This is what I have so far.

<input type=checkbox id="cb1" name="cb1">
<input type=checkbox id="cb2" name="cb2">
<input type=checkbox id="cb3" name="cb3">
<input type=checkbox id="cb4" name="cb4">
<input type=checkbox id="cb5" name="cb5">

<div id="hidden">some stuff</div>  

jQuery below only hides/shows div if one check box is unselected/selected.

('#hidden').hide();
$('#cb1').click(function() {
    if($('#cb1').is(':checked'))
    {
        $('#hidden').show();
    }
    else
    {
        $('#hidden').hide();
    }   
});

Answer 1

If you add a common class to checkboxes it may help if other checkboxes exist in page. For simplification I am using $(‘:checkbox’) selector

var $checks=$(':checkbox').change(function(){
      var allChecked= $checks.filter(':checked').length == $checks.length;
    $('#hidden').toggle( allChecked); /*passing a boolean will tell whether to hide or show*/

})