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

在这个线程上有很多关于Stack over flow的答案，但它们并没有解决我的问题。我想做的是，我有4台收音机，它们的名称和id相同。当我选择其中任何一台时，它会显示一个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()" />

通过在我的浏览器上使用相同的代码而不使用fiddle

---

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

主要问题是您的选择器不正确，无法指向选中的单选按钮。使用：

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

---

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

主要问题是您的选择器不正确，无法指向选中的单选按钮。使用：

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

您也可以试试这个

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

你也可以试试这个

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

---

如何实现这一点还有很多可能性，其中之一是定义

show\u input

函数

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

如果没有此功能，则直接在收音机事件上：

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

在这两个例子中，我都避免使用必须唯一的

#fb

。如果在JS中使用

#fb

，它将仅与第一个

#fb

一起工作，其他元素上的attr id将被忽略

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

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

---

实现这一点的方法有很多种，其中之一是定义

显示输入功能

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


如果没有此功能，则直接在收音机事件上：

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


在这两个例子中，我都避免使用必须唯一的
#fb
。如果在JS中使用
#fb
，它将仅与第一个
#fb
一起工作，其他元素上的attr id将被忽略

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

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

您的页面必须包含唯一的ID，并且您已经为所有输入提供了副本，并且您还没有定义在html中的onchange事件上调用的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>

您的页面必须包含唯一的ID，并且您已经为所有输入提供了副本，并且您还没有定义在html中调用onchange事件的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>

id应该是唯一的id应该是唯一的