选择两个不同的单选组时显示一个 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，显示出来！