显示和隐藏html元素，具体取决于所选的单选项

是的，有很多帖子有点类似，但我想和我的不一样。经过一段时间的挣扎，我无法想出一个解决办法。我需要帮助

我有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>

---

这是我的回复：

尝试按名称或值选择div，并在隐藏其他div的同时显示它们。 请检查此回复-

---

我相信它适合您的用例。

不使用

ifs语句来显示/隐藏div，您只需选中单选按钮的
值，然后循环通过
div
并比较
.text（）
是否等于单选值即可显示该div

演示代码：


$（文档）.ready（函数（）{
$（“.category div:eq（0）”）.show（）//显示第一个div
$（'input'）.change（函数（）{
//获取无线电值
var value=$（“输入[name='resident']：选中”）.val（）；
var value1=$（“输入[name='single']：选中”）.val（）；
console.log（值+“/”+value1）
$（“.category div”）.hide（）；//隐藏所有div
var divss=值+“/”+值1；
//循环通过div
$（“.category div”）。每个（函数（）{
if（$（this）.text（）==divss）{
$（this.show（）//显示该div
}
})
});
})
.category>div{
显示：无
}


居民
非居民


单身
家庭

居民/单身
居民/家庭
非居民/单身
非居民/家庭
实际上，我想检查值，div中的文本只是占位符。里面会有别的东西。谢谢。使用自定义html属性而不是
.text（）
怎么样？然后您只需要检查
.attr（“someattribute”）
？现在如果更改div中的文本，它会断开。我只是希望能够显示基于前面选择的div中的内容。div中的内容可以是任何内容，甚至是表单。谢谢，SwatiHi，检查这个。我所做的是div的内容可以是任何我添加的
data-*
属性，以便轻松找到需要显示的div。漂亮的Swati！我甚至在其中一个div中加入了一个小表单，效果非常好。非常感谢你的病人。
$(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();
    }
  });
});