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!

Try looking at plain javascript. Dont over complicate 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
– 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
– 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 complicating the way that he implemented the JQuery — Jacques Koekemoer
– Jacques Koekemoer, Commented Feb 5, 2016 at 8:27

Nate · Accepted Answer · 2016-02-04 19:46:26Z

3

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

answered Feb 4, 2016 at 19:46

Nate

1,2701 gold badge13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jacob Petersen Over a year ago

I like your map variable for mapping the bitmask to an element ID. That's an excellent idea.

Jacob Petersen · Accepted Answer · 2016-02-04 19:05:39Z

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

Marcos Pérez Gude · Accepted Answer · 2016-02-04 17:35:40Z

2

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

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

answered Feb 4, 2016 at 17:35

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Comments

Thangaraja · Accepted Answer · 2016-02-04 20:53:05Z

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/

Chris G · Accepted Answer · 2016-02-04 17:34:23Z

0

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

answered Feb 4, 2016 at 17:34

Chris G

7806 silver badges20 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related