检查是否选中了 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

您可以检查第一个 div 是否检查了 radio，然后显示另一个 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>

Answer 2

在回应您对您帖子的评论时，我突然想到您只需使用一些简单的 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>