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是否已检查无线电，然后显示另一个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才能实现您的目标：

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: