取消选中复选框时无法隐藏段落

Question

我正在尝试隐藏一个段落，当时取消选中复选框我只能在选中时显示。

这是我的jquery：

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

如果取消选中该段落，我该怎么办？

Answer 1

改为绑定到更改事件：

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

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

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

Answer 2

尝试：

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

Answer 3

您需要测试是否已选中或未选中：

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

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

Answer 4

您可以检查复选框是否已选中并做出相应的响应：

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