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

Question

是的，有很多帖子有点相似，但我猜不像我的。经过一段时间的挣扎，我无法想出解决方案。我需要帮助!

我有 4 个不同的标准:

居民/单例、居民/家庭、非居民/单例、非居民/家庭

例如:如果选中Resident和Single，则显示该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

您可以简单地获取单选按钮的checked值，然后循环遍历您的div，而不是使用ifs语句来显示/隐藏div并比较 .text() 是否等于单选值仅显示 div。

演示代码:

$(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>