hide / show checkboxes based on user select input

Question

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>

Richard Hamilton · Accepted Answer · 2015-12-04 20:04:19Z

2

Take a look at this solution

$("button").on("click", function() {
      $("input[type=checkbox]:not(:checked)").parent().hide();
    })

#block{display:none;background:#eef;padding:10px;text-align:center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<button>
  Hide Checkboxes
</button>

answered Dec 4, 2015 at 20:04

Richard Hamilton

26.5k11 gold badges65 silver badges88 bronze badges

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

Comments

Zakaria Acharki · Accepted Answer · 2015-12-04 20:09:26Z

Try to use :

if ( $(this).is(':checked') ){
    $('.div1').show(1000);
    $('.div2').hide(1000);
}

Note : $('.div1') instead of $('#div1') because you're using classes no ids.

hope this helps.

$('#cbxShowHide').click(function(){
  
  if ( $(this).is(':checked') ){
      $('.div1').show();
      $('.div2').hide();
  }else{
      $('.div2').show();
  }
});

$('#cbxShowHide2').click(function(){
  if ( $(this).is(':checked') ){
      $('.div2').show();
      $('.div1').hide();
  }else{
      $('.div1').show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
  <input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
  <br>
  div1 content
  <br>
</div>
<hr/>
<div class="div2">
  <input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide</label>
  <br>
  div2 content
  <br>
</div>

Spencer Wieczorek · Accepted Answer · 2015-12-04 20:36:13Z

0

All you need to do is have both items be classes, .div and .cbxShowHide, then do:

$('.cbxShowHide').change(function(){
    $('.div').show(1000);
    if(this.checked) 
        $('.div').not($(this).parent()).hide(1000);
});

Fiddle Example

Which will hide all the clicked items but the element you clicked on. And show the elements when you un-check.

edited Dec 4, 2015 at 20:36

answered Dec 4, 2015 at 20:21

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

Collectives™ on Stack Overflow

hide / show checkboxes based on user select input

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related