Question

我不知道如何根据多个单选按钮选择显示/隐藏 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

Answer 1

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

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

1 个答案: