How can I show/hide divs with checkboxes and javascript?

Question

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

Answer 1

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.com/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.net/qp2mLj99/4/

Answer 2

$(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.com/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>

Answer 3

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

Answer 4

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

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

Answer 5

$(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!