如何通过条件判断实现jQuery复选框控制元素显示隐藏？

你的代码存在两个关键问题：

• 判断选中状态时用了$(".checkbox")，这会匹配页面上所有带checkbox类的元素，而非当前操作的目标复选框，应该用$(this)指代触发事件的元素
• 逻辑完全反转：你需要的是勾选时隐藏犬种，取消勾选时恢复显示，但现有代码是选中时移除hidden类（显示元素），取消时添加hidden类（隐藏元素）

修正后的基础版本代码 #

$("#beagle").on('change', function() {
  if ($(this).is(":checked")) {
    $(".beagle").addClass("hidden");
  } else {
    $(".beagle").removeClass("hidden");
  }
});

简化优化版本 #

用toggleClass可以一行完成状态切换，逻辑更简洁：

$("#beagle").on('change', function() {
  $(".beagle").toggleClass("hidden", $(this).is(":checked"));
});

toggleClass的第二个参数是布尔值，为true时添加类，false时移除类，完美匹配你的需求场景。

内容的提问来源于stack exchange，提问作者Kristin C.