Cannot hide a paragraph when a checkbox is unchecked

I am trying to hide a paragraph when a check box is unchecked right 开发者_如何学JAVAnow I can only display when it is checked.

here is my jquery:

$('.pharmacy').click(function(){
$('.pcsoc').show();
});

What can I do to hide the paragraph when it is unchecked?

Bind to the change event instead:

$('.pharmacy').change(function(e){
  $('.pcsoc').toggle();
});

Or you can check if .is(':checked') and make your own hide/show (more bullet-proof).

$('.pharmacy').change(function(e){
  if ($(this).is(':checked'))
    $('.pcsoc').show();
  else
    $('.pcsoc').hide();
});

Try:

$('.pharmacy').click(function(){
  $('.pcsoc').toggle();
});

You need to test if it is checked or unchecked:

$('.pharmacy').click(function(){
  if ($(this).is(':checked')) {
    $('.pcsoc').show();
  }
  else $('.pcsoc').hide();
});

EDIT It's probably better to bind to the change() method as suggested by Brad Christie.

You can check if the checkbox is checked and respond appropriately:

$('.pharmacy').click(function() {
    if(this.checked)
        $('.pcsoc').show();
    else
        $('.pcsoc').hide();
});