未选中复选框时无法隐藏段落答案

【问题标题】：Cannot hide a paragraph when a checkbox is unchecked未选中复选框时无法隐藏段落
【发布时间】：2011-09-06 13:29:48
【问题描述】：

我正在尝试在未选中复选框时隐藏段落，我现在只能在选中时显示。

这是我的 jquery：

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

取消选中的段落如何隐藏？

【问题讨论】：

【解决方案1】：

您可以检查复选框是否被选中并做出适当的回应：

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

【讨论】：

【解决方案2】：

你需要测试是勾选还是不勾选：

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

编辑最好按照 Brad Christie 的建议绑定到 change() 方法。

【讨论】：

【解决方案3】：

改为绑定到 change 事件：

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

或者您可以检查.is(':checked') 并自己隐藏/显示（更防弹）。

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

【讨论】：

【解决方案4】：

试试：

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

【讨论】：