Jquery根据多个单选按钮组选择显示/隐藏div答案

【问题标题】：Jquery Show/Hide div depending on multiple radio button group selectionJquery根据多个单选按钮组选择显示/隐藏div
【发布时间】：2021-06-08 03:39:38
【问题描述】：

我不知道如何根据多个单选按钮选择来显示/隐藏 div。如果问题 1 和问题 2 都选择为是，则应显示 div，在任何其他情况下应隐藏 div。

$(function() {
  $("input[name='q1']").click(function() {
    if ($('input[name=q1]:checked').val() == "Yes") {
      $("input[name='q2']").click(function() {
        if ($('input[name=q2]:checked').val() == "Yes") {
          $("#part2").show();
        } else {
          $("#part2").hide();
        }
      });
    } else {
      $("#part2").hide();
    }
  });
});

<input type="radio" class="hideshow" name="q1" value="Yes" /> Yes
<input type="radio" id="test" name="q1" value="No" /> No
<br />
<input type="radio" class="hideshow2" name="q2" value="Yes" /> Yes
<input type="radio" id="test2" name="q2" value="No" /> No
<br />
<div id="part2" style="display:none; margin-top:10px;">
  TEXT
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

DEMO

【问题讨论】：

标签： jquery

【解决方案1】：

最好只使用一个change 处理程序和一个if 来检查您的状况。
当点击标签时，change 事件也会被触发，因此它可能比click 事件更好。
当您在q1 的处理程序中绑定q2 的点击处理程序时，您会在每次点击q1 时再次绑定它。

$(function() {
  $("input[name='q1'], input[name='q2']").change(function() {
    if ($('input[name=q1]:checked').val() === "Yes" && $('input[name=q2]:checked').val() === "Yes") {
      $("#part2").show();
    } else {
      $("#part2").hide();
    }
  });
});

<input type="radio" class="hideshow" name="q1" value="Yes" /> Yes
<input type="radio" id="test" name="q1" value="No" /> No
<br />
<input type="radio" class="hideshow2" name="q2" value="Yes" /> Yes
<input type="radio" id="test2" name="q2" value="No" /> No
<br />
<div id="part2" style="display:none; margin-top:10px;">
  TEXT
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：

正确，对于click 事件，无论是或否，它总是依赖于q1。非常感谢@Sven。