score:2

Accepted answer

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>

score: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.

score:1

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>


Related Query

More Query from same tag