Question

I have 3 checkboxes and 2 divs. I want to be able to show one div when all 3 checkboxes have been ticked and show the other div when any other combination of checkboxes are ticked (ie not all 3).
It would be very much appreciated if anybody could help me out with some suggestions. Thanks in advance.

<input id="1" type="checkbox" />
<input id="2" type="checkbox" />
<input id="3" type="checkbox" />

<div id="checked1">Title</div>

<div id="checked2" style="display:none;"><span style="color:green;">Title</span></div>


$(document).ready(function() {

$(('input#1')&&('input#2')&&('input#3')).change(
    function() {
        if ($(this).is(':checked')) {
             $("#checked2").show();
             $("#checked1").hide();

        } else {
              $("#checked1").show();
             $("#checked2").hide();
            }
    });
});

Answer 1

var $cBoxes = $('#1,#2,#3');

$cBoxes.change(function(){
  // check if all are checked based on if the number of checkboxes total
  // is equal to the number of checkboxes checked
  if ($cBoxes.length == $cBoxes.filter(':checked').length){
    $('#checked2').show();
    $('#checked1').hide();
  }else{
    $('#checked2').hide();
    $('#checked1').show();
  }
});

Something like that?