html - 根据单选选项显示和隐藏 html 元素

Question

是的，有很多帖子有点相似，但我猜不像我的。在挣扎了一段时间后，我无法想出解决方案。我需要帮助!
我有4个不同的标准:
居民/单例、居民/家庭、非居民/单例、非居民/家庭
例如:如果 居民和 单例检查然后显示该div。其余的都是一样的。

<fieldset>
  <ol id="membership">
   <li>
    <input type="radio" name="resident" value="Resident" checked="checked" /> Resident
    <input type="radio" name="resident" value="Non-Resident"  /> Non-Resident
   </li>
   <li>
    <input type="radio" name="single" value="Single" checked="checked" /> Single
    <input type="radio" name="single" value="Family"  /> Family
   </li>
 </ol>

 <div style="display: none;">
  <div>Resident/Single</div>
  <div>Resident/Family</div>
  <div>Non-Resident/Single</div>
  <div>Non-Resident/Family</div>
 </div>

</fieldset>

这是我所能做到的。

$(document).ready(function() {
  $('input').change(function() {
    if ($('input[value="Resident"]').is(':checked') && $('input[value="Single"]').is(':checked')) {
      $('div').show();
    } else if ($('input[value="Resident"]').is(':checked') && $('input[value="Family"]').is(':checked')) {
      $('div').show();
    } else if ($('input[value="Non-Resident"]').is(':checked') && $('input[value="Single"]').is(':checked')) {
      $('div').show();
    } else if ($('input[value="Non-Resident"]').is(':checked') && $('input[value="Family"]').is(':checked')) {
      $('div').show();
    } else {
      $('div').hide();
    }
  });
});

这是我的回复: https://repl.it/@labanino/Show-based-on-selection#script.js

Answer 1

而不是使用 ifs statement要显示/隐藏 div，您只需获取 checked单选按钮的值然后循环遍历您的 divs并比较 .text()等于 radio 值显示 divs only 。
演示代码 :

$(document).ready(function() {
  $(".category div:eq(0)").show() //show 1st div
  $('input').change(function() {
    //get radio values
    var value = $("input[name='resident']:checked").val();
    var value1 = $("input[name='single']:checked").val();
    console.log(value + "/" + value1)
    $(".category div").hide(); //hide all divs
    var divss = value + "/" + value1;
    //loop through divs
    $(".category div").each(function() {
      if ($(this).text() === divss) {
        $(this).show() //show that div
      }
    })
  });

})

 .category > div {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
  <ol id="membership">
    <li>
      <input type="radio" name="resident" value="Resident" checked="checked" /> Resident
      <input type="radio" name="resident" value="Non-Resident" /> Non-Resident
    </li>
    <li>
      <input type="radio" name="single" value="Single" checked="checked" /> Single
      <input type="radio" name="single" value="Family" /> Family
    </li>
  </ol>

  <div class="category">
    <div>Resident/Single</div>
    <div>Resident/Family</div>
    <div>Non-Resident/Single</div>
    <div>Non-Resident/Family</div>
  </div>

</fieldset>