根据单选选项显示和隐藏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/根据选择显示#script.js

Answer 1

不用ifs statement来显示/隐藏div，只需获取单选按钮的checked值，然后在divs中循环并比较.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>

Answer 2

尝试按名称或值选择div，并在隐藏其他div的同时显示它们。检查此repl-https://repl.it/@DavidThomas12/根据选择进行展示

我相信它适合你的用例。