如果选择了所有无线电中的任何一个选项,请显示Div?

时间:2015-01-06 07:25:28

标签: javascript jquery html css

在这个帖子上有很多关于流量的答案,但他们没有解决我的问题我想要做的是我有4个同名同名的无线电我想要当我选择其中任何一个时它会告诉我一个div,但它只适用于第一台收音机,当我选择它不能在第2,第3,第4,

工作
<input class="rad_roof" type="radio" name="fb" id="fb" onchange="show_input()"  />
<input class="rad_roof" type="radio" name="fb" id="fb" onchange="show_input()" />
<input class="rad_roof" type="radio" name="fb" id="fb" onchange="show_input()"/>
<input class="rad_roof" type="radio" name="fb" id="fb" onchange="show_input()" />

这个j查询功能我正在使用......

function show_input(){
 if($('#roof_types').is(':checked'))
    $(".measurement").fadeIn(300);
}

通过在我的浏览器上使用相同的代码来处理小提琴 http://jsfiddle.net/ahmadsaadkhan/x1kn7p8q/

5 个答案:

答案 0 :(得分:2)

如何实现这一目标的可能性更大,其中之一是定义show_input函数

function show_input() {
    return $('#showdiv').show();
}

http://jsfiddle.net/x1kn7p8q/4/

没有该功能,直接在无线电事件中:

$('.rad_roof').change(function() {
    $('#showdiv').show();
});

http://jsfiddle.net/x1kn7p8q/5/

在两个示例中都看到我避免使用必须唯一的#fb。如果你在JS中使用#fb,它只能使用第一个#fb,其他元素的attr id将被忽略。

尝试此操作并单击任何收音机,仅当您单击第一个时才会显示警报。

$('#fb').click(function() {
    alert('#fb clicked');
});

http://jsfiddle.net/x1kn7p8q/7/

答案 1 :(得分:1)

您的标记不正确。 ID应该是唯一的。

主要问题是你有不正确的选择器来定位已检查的单选按钮。使用方法:

 if($('.rad_roof:checked').length) $("#showdiv").show();

<强> Demo

答案 2 :(得分:1)

你也可以试试这个,

$(document).ready(function(){
   $('.rad_roof').click(function(){
        if($(this).is(":checked")){
            $(".showdiv").show();
        }
   });
});

答案 3 :(得分:1)

$('.rad_roof').each(function() {
  if ($(this).is(':checked')) {
    $('.measurement).fadeIn(300);
  }
});

答案 4 :(得分:1)

您的页面必须包含唯一的ID,并且您已为所有输入提供了重复项,并且您尚未定义在html中调用onchange on on事件的javascript方法。试试这段代码:

你的Html代码:

<input class="rad_roof" type="radio" name="fb" id="fb1" />
<input class="rad_roof" type="radio" name="fb" id="fb2" />
<input class="rad_roof" type="radio" name="fb" id="fb3" />
<input class="rad_roof" type="radio" name="fb" id="fb4" />
<div class="showdiv" id="showdiv">
     <h2>Facebook</h2> 
    <br />
    <input class="fb" type="text" name="fb" placeholder="Facebook" />
</div>

你的JS

$('.rad_roof').change(function(){
    if ($(this).is(':checked')) $("#showdiv").show();
});