如何根据多个复选框的勾选状态正确控制指定div的显示与隐藏？

问题原因 #

• 现有代码给每个目标复选框单独绑定了点击事件，事件逻辑仅判断当前触发事件的复选框的勾选状态，只要取消勾选其中任意一个目标选项，就会直接执行隐藏逻辑，不会判断其他目标选项是否仍处于勾选状态，所以会出现你遇到的问题。
• 同时你引入了两个不同版本的jQuery，可能引发版本冲突，建议只保留一个。

修复后的代码 #

JS代码（直接替换你原来的所有JS逻辑即可） #

$(function() {
  // 初始隐藏目标div
  const $targetBlock = $("#question5_1_block");
  $targetBlock.hide();

  // 给第一组所有复选框统一绑定change事件（比click更适配表单操作，键盘操作勾选也能响应）
  $('input[name="q5"]').on('change', function() {
    // 判断第2、3、4项是否有至少一个被勾选
    const hasValidChecked = $('#Question52:checked, #Question53:checked, #Question54:checked').length > 0;
    // 根据判断结果控制显示隐藏
    hasValidChecked ? $targetBlock.show() : $targetBlock.hide();
  });
});

HTML优化建议 #

删掉其中一个jQuery引入，避免版本冲突，比如保留jQuery3.1.0即可：

<!-- 删掉下面这行 -->
<script src=https://code.jquery.com/jquery-1.12.4.min.js></script>
<!-- 保留这行 -->
<script src=https://code.jquery.com/jquery-3.1.0.js></script>

逻辑说明 #

每次任意勾选/取消勾选第一组的复选框时，都会统一统计所有符合展示条件的复选框的选中数量：

• 只要数量大于0，说明2、3、4项中存在至少一项被勾选，就展示目标div
• 数量等于0，说明2、3、4项全未勾选（仅选第一项或者全不选），就隐藏目标div

内容的提问来源于stack exchange，提问作者Noel M.