I've seen several posts similar to what I'm looking for, but not quite my exact circumstance. I want to show/hide html divs when some check boxes are clicked.

I've found the following:

<script>
jQuery(function(){
    var checks = $('#checkbox1, #checkbox2, #checkbox3');

    checks.click(function(){
        if (checks.filter(':checked').length == checks.length) {
            $('#purchaseForm').show();
        } else {
            $('#purchaseForm').hide();
        }
    }).triggerHandler('click')
})    


   </script>

<label><input name="checkbox1" id="checkbox1" value="" type="checkbox"> checkbox1 </label>
<label><input name="checkbox2" id="checkbox2" value="" type="checkbox"> checkbox2 </label>
<label><input name="checkbox3" id="checkbox3" value="" type="checkbox"> checkbox3 </label>


     <div id="purchaseForm">
         Content Here
     </div> 

What I'm looking for is:

<label><input name="checkbox1" id="checkbox1" value="" type="checkbox"> checkbox1 </label>
<label><input name="checkbox2" id="checkbox2" value="" type="checkbox"> checkbox2 </label>
<label><input name="checkbox3" id="checkbox3" value="" type="checkbox"> checkbox3 </label>

<div id="A">
Display for selected Checkbox one only
</div>

<div id="B">
Display for selected Checkbox two only
</div>

<div id="C">
Display for selected Checkbox three only
</div>

<div id="D">
Display for selected Checkboxes one and two
</div>

<div id="E">
Display for selected Checkboxes one and three
</div>

<div id="F">
Display for selected Checkboxes two and three
</div>

<div id="G">
Display for selected Checkboxes one two and three
</div>

This helped me understand this a little bit more, but not everything. When all three checkboxes are clicked, the content appears. What I'm looking for is content based on the binations of check boxes.

For example, say checkbox1 is selected, then only div-A would display. But if checkboxes 1 and 3 are both selected, then div-E would display, and I'm looking for that with each checkbox.

I'm still learning javascript so any advice would be greatly appreciated. Thanks!

I've seen several posts similar to what I'm looking for, but not quite my exact circumstance. I want to show/hide html divs when some check boxes are clicked.

I've found the following:

<script>
jQuery(function(){
    var checks = $('#checkbox1, #checkbox2, #checkbox3');

    checks.click(function(){
        if (checks.filter(':checked').length == checks.length) {
            $('#purchaseForm').show();
        } else {
            $('#purchaseForm').hide();
        }
    }).triggerHandler('click')
})    


   </script>

<label><input name="checkbox1" id="checkbox1" value="" type="checkbox"> checkbox1 </label>
<label><input name="checkbox2" id="checkbox2" value="" type="checkbox"> checkbox2 </label>
<label><input name="checkbox3" id="checkbox3" value="" type="checkbox"> checkbox3 </label>


     <div id="purchaseForm">
         Content Here
     </div> 

What I'm looking for is:

<label><input name="checkbox1" id="checkbox1" value="" type="checkbox"> checkbox1 </label>
<label><input name="checkbox2" id="checkbox2" value="" type="checkbox"> checkbox2 </label>
<label><input name="checkbox3" id="checkbox3" value="" type="checkbox"> checkbox3 </label>

<div id="A">
Display for selected Checkbox one only
</div>

<div id="B">
Display for selected Checkbox two only
</div>

<div id="C">
Display for selected Checkbox three only
</div>

<div id="D">
Display for selected Checkboxes one and two
</div>

<div id="E">
Display for selected Checkboxes one and three
</div>

<div id="F">
Display for selected Checkboxes two and three
</div>

<div id="G">
Display for selected Checkboxes one two and three
</div>

This helped me understand this a little bit more, but not everything. When all three checkboxes are clicked, the content appears. What I'm looking for is content based on the binations of check boxes.

For example, say checkbox1 is selected, then only div-A would display. But if checkboxes 1 and 3 are both selected, then div-E would display, and I'm looking for that with each checkbox.

I'm still learning javascript so any advice would be greatly appreciated. Thanks!

• javascript
• jquery
• html
• checkbox

• Can you post your HTML (The one which has div-A, div-E etc) – Thangaraja Commented Feb 4, 2016 at 17:31
• Try looking at plain javascript. Dont over plicate it with jquey. Create a plain function and add a onclick event in the html. Simple and easy enough. Then simply add code like var chk = document.getElementById ('checkbox1').checked which will be true or false – Jacques Koekemoer Commented Feb 4, 2016 at 17:32
• @JacquesKoekemoer it's really simplest with jquery than pure javascript. var chk = $('input[type=checkbox]).prop('checked') it will be true or false (getter) and var chk = $('input[type=checkbox]).prop('checked', true) it will check the checkboxes (setter) – Marcos Pérez Gude Commented Feb 4, 2016 at 17:34
• @MarcosPérezGude yes I agree JQuery is simpler when you understand it, but if you read his question you will see he is still learning Javascript. Its easier to learn JS first before learning JQuery. Besides he is over plicating the way that he implemented the JQuery – Jacques Koekemoer Commented Feb 5, 2016 at 8:27

5 Answers 5

$(document).ready(function() {
  var map = {
    0: '',  1: 'A', 2: 'B', 3: 'D',
    4: 'C', 5: 'E', 6: 'F', 7: 'G'
  };
  $('#checkbox1, #checkbox2, #checkbox3').change(function(event) {
    var bitmask = ($('#checkbox1')[0].checked?1:0)+
                  ($('#checkbox2')[0].checked?2:0)+
                  ($('#checkbox3')[0].checked?4:0);
    $('div').hide();
    $('div#'+map[bitmask]).show();
  });
  $('div').hide();
})

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label><input name="checkbox1" id="checkbox1" value="" type="checkbox"> checkbox1 </label>
<label><input name="checkbox2" id="checkbox2" value="" type="checkbox"> checkbox2 </label>
<label><input name="checkbox3" id="checkbox3" value="" type="checkbox"> checkbox3 </label>

<div id="A">
Display for selected Checkbox one only
</div>

<div id="B">
Display for selected Checkbox two only
</div>

<div id="C">
Display for selected Checkbox three only
</div>

<div id="D">
Display for selected Checkboxes one and two
</div>

<div id="E">
Display for selected Checkboxes one and three
</div>

<div id="F">
Display for selected Checkboxes two and three
</div>

<div id="G">
Display for selected Checkboxes one two and three
</div>

I would map the checkboxes to binary values, where checkbox1 = 1, checkbox2=2, checkbox3=4, checkbox4=8, etc. So, check if the box is checked or not, and if it is, add it's binary value to a number. When your done, analyze the number to determine what boxes are checked.

Here is a working codepen

HTML:

<label><input name="checkbox1" id="checkbox1" value="" type="checkbox"> checkbox1 </label>
<label><input name="checkbox2" id="checkbox2" value="" type="checkbox"> checkbox2 </label>
<label><input name="checkbox3" id="checkbox3" value="" type="checkbox"> checkbox3 </label>


 <div id="content">
     a
 </div> 

JS:

$('input').click(function() {
  var number = checkCheckBoxes();
  if(number == 0) {
    $('#content').html("None of them!");
  }
  if(number == 1) {
    $('#content').html("Just 1!");
  }
  if(number == 2) {
    $('#content').html("Just 2!");
  }
  if(number == 3) {
    $('#content').html("Just 1 & 2!");
  }
  if(number == 4) {
    $('#content').html("Just 3!");
  }
  if(number == 5) {
    $('#content').html("Just 1 & 3!");
  }
  if(number == 6) {
    $('#content').html("Just 2 & 3!");
  }
  if(number == 7) {
    $('#content').html("All of them!");
  }
})

function checkCheckBoxes() {
  var number = 0;
  if($('#checkbox1:checked').length) {
    number = number + 1;
  }
  if($('#checkbox2:checked').length) {
    number = number + 2;
  }
  if($('#checkbox3:checked').length){
    number = number + 4;
  }
  return number;
}

It's better if you manage the checkboxes with onchangeevent instead of click event:

checks.on('change', function(){
     $(this).prop('checked') // true or false
});

Cleanest solution is to add the checkbox ids in the div itself and use it.

Use attribute contains selector to find the respective div. https://api.jquery./attribute-contains-selector/

Check the below code.

HTML

<label>
  <input name="checkbox1" id="checkbox1" value="" type="checkbox"> checkbox1 </label>
<label>
  <input name="checkbox2" id="checkbox2" value="" type="checkbox"> checkbox2 </label>
<label>
  <input name="checkbox3" id="checkbox3" value="" type="checkbox"> checkbox3 </label>

<div id="A" checkboxids="checkbox1">
  Display for selected Checkbox one only
</div>

<div id="B" checkboxids="checkbox2">
  Display for selected Checkbox two only
</div>

<div id="C" checkboxids="checkbox3">
  Display for selected Checkbox three only
</div>

<div id="D" checkboxids="checkbox1,checkbox2">
  Display for selected Checkboxes one and two
</div>

<div id="E" checkboxids="checkbox1,checkbox3">
  Display for selected Checkboxes one and three
</div>

<div id="F" checkboxids="checkbox2,checkbox3">
  Display for selected Checkboxes two and three
</div>

<div id="G" checkboxids="checkbox1,checkbox2,checkbox3">
  Display for selected Checkboxes one two and three
</div>

JS

 $("div[checkboxids]").hide();

$("input:checkbox").click(function() {

  // Hide all the div
  $("div[checkboxids]").hide();

  // Enable respective divs only

  $("input:checked").each(function() {
    $("div[checkboxids*='" + $(this).attr("id") + "']").show();
  });

});

Demo : https://jsfiddle/qp2mLj99/4/

$(document).ready(function(){
  $('#checkbox1').click(function(){
        $("#purchaseForm").slideToggle('slow');
        $("#purchaseForm").toggleClass('active');
  });
});

This is easy and works very well. You can always change the slideToggle or toggleClass to show and hide.

Hope it helps you!