vendredi 4 décembre 2015

hide / show checkboxes based on user select input

Stuck on trying to solve this.. I simply would like to have a static HTML form with checkboxes. Then the user hits the page then can select via the checkboxes, the checkbox or checkboxes that are selected remain on page, then ones that are not selected simply hide.

Below is the latest logic I have tried:

(simplified version of 2 checkboxes, but note there will be 10)

$('#cbxShowHide').click(function(){
    this.checked?$('#div1').show(1000);
    $('#div2').hide(1000);
});

$('#cbxShowHide2').click(function(){
    this.checked?$('#div2').show(1000);
    $('#div1').hide(1000);
});

jsFiddle

HTML:

<div class="div1">
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
</div>

<div class="div2">
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide</label>
</div>




Aucun commentaire:

Enregistrer un commentaire