如果选择了所有收音机中的任何一个选项，则显示 Div？

Question

这个线程上有很多关于 stake over flow 的答案，但他们没有解决我的问题我想做的是我有 4 个同名的收音机，当我 select any其中显示 div 但它只在第一台收音机上工作，而我 select 它在第二台、第三台、第四台、

台不工作

<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);
}

在我的浏览器上使用相同的代码无法在 fiddle 上运行 http://jsfiddle.net/ahmadsaadkhan/x1kn7p8q/

Answer 1

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

主要问题是您使用不正确的选择器来定位选中的单选按钮。使用：

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

Demo

Answer 2

你也可以试试这个，

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

Answer 3

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

Answer 4

有更多的可能性如何实现，其中之一是定义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/

Answer 5

您的页面必须包含唯一 ID，并且您已经为所有输入提供了重复项，并且您没有定义 javascript 您在 html 中调用 onchange 事件的方法。试试这个代码：

你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();
});

如果选择了所有收音机中的任何一个选项，则显示 Div？

Show Div if any one option from all radios selected?

html

javascript

css

jquery