jeudi 4 février 2016

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

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> 

<div id="A">
Checkbox one only
</div>

<div id="B">
Checkbox two only
</div>

<div id="C">
Checkbox three only
</div>

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

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

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

<div id="G">
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!




Aucun commentaire:

Enregistrer un commentaire