检查是否选中了 div 中的单选按钮之一

Question

我在这里发现这个脚本几乎可以满足我的需要（查看是否选中了 div 中的一个单选按钮），不过，它会针对每个单选按钮提醒我，我只需要一个提醒，如果其中一个被选中。

背景资料：如果选中一个，我将显示下一个 div。否则 div 将不会显示。在我的系统顶部，单击选中的单选按钮将取消选中它，然后显示的 div 将被隐藏。

我的代码：

<div class="divtop">
    <input type="radio" name="r1" value="v1" />
    <input type="radio" name="r1" value="v2" />
    <input type="radio" name="r1" value="v3" />
<div>

这是脚本：

$('.divtop input:radio').live('click', function(event) { 
  var div = $("div.divtop");
  var radiobuttons = div.find("input[type='radio']");
for (var i = 0; i < radiobuttons.length; i++) {
  if (radiobuttons[i].type === 'radio' && radiobuttons[i].checked) {
     alert ('on') // action
     } else { 
     alert ('off') // action
}} });

我如何调整此脚本以在选中其中一个单选按钮时只收到一个警报？

该函数必须是通用的（不使用单选按钮名称），因为它将适用于具有不同单选按钮组的不同情况。

Answer 1

针对您对 post 的评论，我突然想到您可以通过一些简单的 css 实现您想要的：

[type="radio"], [type="radio"]:checked + .inner{
  display:block;
}

.inner{
  display:none
}

<div class="divtop">
    <input checked type="radio" name="r1" value="v1" />
    <div class="inner">ONE</div>
    <input type="radio" name="r1" value="v2" />
    <div class="inner">TWO</div>
    <input type="radio" name="r1" value="v3" />
    <div class="inner">THREE</div>
<div>

Answer 2

您可以检查第一个 div 是否检查了收音机，然后显示另一个 div。

$(document).ready(function(){
    $('.divtop > input:radio').change(function(){
      if($(this).is(":checked"))
      {
        $('.divMiddle').removeClass('hide');  
      }
    });
});

.hide
{
  display: none;  
} 
.show
{
  display: block;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divtop">
    <input type="radio" name="r1" value="v1" />ONE
    <input type="radio" name="r1" value="v2" />TWO
    <input type="radio" name="r1" value="v3" />THREE
<div>
<div class="divMiddle hide">
    <input type="radio" name="r11" value="v11" /> ONE
    <input type="radio" name="r11" value="v22" /> TWO
    <input type="radio" name="r11" value="v33" /> THREE
</div>

检查是否选中了 div 中的单选按钮之一

Check if one of the radio buttons within a div is checked

jquery

checked