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

Show Div if any one option from all radios selected?

本文关键字：选项 Div 显示 任何一 选择 无线电 如果      更新时间：2023-09-26

这个线程上有很多关于质押流的答案，但它们并没有解决我的问题我想做的是我有 4 个同名的无线电，当我选择它们中的任何一个时，它都会向我显示一个div，但它仅适用于第一个无线电，当我选择它时，它在第二个无线电上不起作用， 第三、第四、 

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

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

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

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

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

演示

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

您的页面必须包含唯一的 ID，并且您为所有输入提供了重复项，并且您尚未定义在 html 中调用的 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();
});

你也可以试试这个，

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