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

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

• javascript
• jquery

• Do you want to show the div when all checkboxes are checked? – user1796666 Commented Nov 11, 2012 at 18:35

7 Answers 7

If you add a mon 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*/

})

If all checkboxes should be checked, use this code:

if ($('input:checked').length === 5 /* number of checkboxes */) { ... }

If some of them should be:

var checkedIds = $('input:checked').map(function() {
   return this.id;
}).get();
var neededIds = ['ch1', 'ch2' /*, ... */];
if (checkedIds.toString() === neededIds.toString()) { ... }

Here we click any of the checks that start with cb - toggle from other answer

$(function() {
  var CBS = $('input[name^="cb"]');
  CBS.click(function() {
    var show = $('input[name^="cb"]:checked').length==CBS.length;
    $('#hidden').toggle(show); // better solution than show/hide
  }​);​
}​);​

DEMO

If I read right, you want to show the div only if all checkboxes are checked. I created a jsfiddle, and the code is below:

http://jsfiddle/jyw9n/

<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>

$('#hidden').hide();
$('input:checkbox').click(function() {
    if(!$('input:checkbox:not(:checked)').length)
    {
        $('#hidden').show();
    }
    else
    {
        $('#hidden').hide();
    }   
});

Just do:

$('[id^=cb]').click(function() {
    if(! $('[id^=cb]:not(:checked)').length)
    {
        $('#hidden').show();
    }
    else
    {
        $('#hidden').hide();
    }   
});

Here we use `[id^=cb] to select all your elements with id starting in "cb" string, and then for any click of them we just check if there's any of them unchecked, if not, then show your div.

UPDATE: Updated my code above to support the fact there's no :unchecked selector in jQuery, instead :not(:checked) have to be used. Thanks KirillIvlev for noting this.

Something like this as per your logic should also work, but mplungjan Idea is better than this.

$(function() {

$("input").click(function() { 
    if($("#cb1").is(":checked") && $("#cb2").is(":checked")  && $("#cb3").is(":checked") &&  $("#cb4").is(":checked") && $("#cb5").is(":checked"))
    {
        $('#hidden').hide();
    }
    else
    {
        $('#hidden').show();
    }   
});

  })

What i understood is you want to hide or show a div by paring multiple checkboxes. Suppose you want to show a div only when 3 checkbox are selected.

Easy way to do is , gave all the checkboxes same name for which you want to check and bind the function on their click to check for all the 3 checkboxes whether they are checked or not. if all three are checked show div else hide.

<input type=checkbox id="cb1" name="cb1">
<input type=checkbox id="cb2" name="cb1">
<input type=checkbox id="cb3" name="cb1">
<input type=checkbox id="cb4" name="cb2">
<input type=checkbox id="cb5" name="cb3">
<div id="hidden">some stuff</div>  

<script>
var $hiddenDiv=$('#hidden');
var hideOrShowDivFlag=false
$('input[name=cb1]').click(function(){
    $("input['cb1']").each(function(){
    hideOrShowDivFlag=($(this).is(":checked"))?true:false
    })
    (hideOrShowDivFlag)?$hiddenDiv.show():$hiddenDiv.hide();
});

You can run this code for any set of given checkboxes. Make sure you gave them same name or any mon attribute,