当选择两个不同的单选组时显示div

Question

我试图显示一个隐藏的div时，两个不同的单选按钮被选中;单选按钮在不同的组中，具有不同的id。因此，用户将选择一个特定的单选按钮来显示此内容。我希望用JQuery实现这一点。

我希望当用户在不同的无线电组中进行特定的无线电选择时，向用户显示特定的DIV内容。的帮助!

<script>
$(document).ready(function () {
$('[name="group1"], [name="group2"]').click(function(){
if ($(this).attr("id") == "option1") && ($(this).attr("id") == "option2")
{
$('#test-display').show();
} else {
$("#test-display").hide();
}
});
});

</script>

<div id="test-display" class="text-white" style="display:none ;">
PLEASE SHOW ME
</div>

<div>
<input type="radio" name="group1" id="option1">
</div>
<div>
<input type="radio" name="group2" id="option2">
</div>

Answer 1

你可以只使用javascript而不使用jQuery。(编辑:我只是想说，如果你只想使用它，同样的逻辑也可以在jQuery中实现，但这里没有必要。

首先你需要得到那些你想要的单选按钮，当启用时应该显示隐藏的div，添加事件监听器，并检查是否两者都启用，然后改变隐藏div的css属性。

查看下面的代码示例:

当我们选择了组1的第一个单选按钮和组2的第三个单选按钮那么我应该显示隐藏的div，否则我不应该。

$('input[type=radio]').on("change", buttonChanged);
function buttonChanged() {
if ($("#group1_option1").is(':checked') && $("#group2_option3").is(':checked')) {
$("#test-display").show();
} else {
$("#test-display").hide();
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div id="test-display" class="text-white" style="display:none;">
PLEASE SHOW ME
</div>
<div>
<span>Group 1:</span>
<input type="radio" name="group1" id="group1_option1">
<input type="radio" name="group1" id="group1_option2">
</div>
<div>
<span>Group 2:</span>
<input type="radio" name="group2" id="group2_option1">
<input type="radio" name="group2" id="group2_option2">
<input type="radio" name="group2" id="group2_option3">
</div>

Answer 2

上面的解决方案是完全有效的，但如果你想使用JQuery，我提出这个解决方案:

<div id="hidden_div" class="text-white" >
<p>ALL RADIOS SELECTED</p>
</div>
<div>
<input type="radio" name="group1" id="group1_radio1">
</div>
<div>
<input type="radio" name="group1" id="group1_radio2">
</div>
<div>
<input type="radio" name="group2" id="group2_radio1">
</div>
<div>
<input type="radio" name="group2" id="group2_radio2">
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
// hide the div
$('#hidden_div').hide();
// when all radio groups are selected, show the hidden div
$('input[type=radio]').change(function () {
// get the number of checked radio buttons in each group
var group1 = $('input[name=group1]:checked').length;
var group2 = $('input[name=group2]:checked').length;
// if both groups have a radio button selected, show the div
if (group1 > 0 && group2 > 0) {
$('#hidden_div').show();
}
});
});                    
</script>

我为我的测试增加了一些额外的收音机，只是为了再次检查任何收音机都可以工作。你的想法是对的，但是JQuery的实现并不正确。

我写了一些关于我的解决方案如何工作的评论，但这里是一个快速的回顾。

1. 不用样式来隐藏div，直接用JQuery来完成
2. 当无线电发生变化时，触发
功能
3. 获取每个无线电组并找到它们的长度(这让我们知道它是否被选中)
4. 如果长度大于1，显示它!