檢查一個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>