检查一个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已签电台，然后显示另一个分区。

$(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>