Javascript/jQuery问题

我试着制作单选按钮，当它们处于活动状态时，它会显示一个下拉列表。我已经可以让它显示，但当我点击另一个单选按钮时，它会显示一个，但不会隐藏另一个。。。 代码：

尽管我建议从元素本身中删除javascript，给它们

id

s，并使用

$（theID）.change（function（）{…

）将javascript添加到单独的脚本中

或者，如果希望立即隐藏，可以使用

hide

而不是

fadeOut

还有最后一个建议。如果有很多这样的元素，而不仅仅是2个，我会为每个正在淡入的元素添加一个共享类。然后，不要对每个元素调用

hide

，只需调用

$（“.className”）.hide（）

来隐藏任何可能可见的元素。

将id=“ban”和id=“rank”添加到收音机中即可

在jquery部分中，将单击处理程序添加到单选按钮中

$(':radio').click(function() {
  if ($(this).attr("id") == "ban") $("ban_length").fadeToggle();
  if ($(this).attr("id") == "rank") $("rank_length").fadeToggle();
});

---

JavaScript部分：

$(document).ready(function() {
    $('#op1').change(function(){
        $("#ban_length").fadeIn();
        $("#rank_list").fadeOut();
    });
    $('#op2').change(function(){
        $("#ban_length").fadeOut();
        $("#rank_list").fadeIn();
    });
});

<input type='radio' name='op' id='op1'/>
<input type='radio' name='op' id='op2'/>

<div id="ban_length">demo</div>
<div id="rank_list">demo</div>

HTML:

$(document).ready(function() {
    $('#op1').change(function(){
        $("#ban_length").fadeIn();
        $("#rank_list").fadeOut();
    });
    $('#op2').change(function(){
        $("#ban_length").fadeOut();
        $("#rank_list").fadeIn();
    });
});

<input type='radio' name='op' id='op1'/>
<input type='radio' name='op' id='op2'/>

<div id="ban_length">demo</div>
<div id="rank_list">demo</div>

演示
演示

演示：

$(document).ready(function() {
    $('#op1').change(function(){
        $("#ban_length").fadeIn();
        $("#rank_list").fadeOut();
    });
    $('#op2').change(function(){
        $("#ban_length").fadeOut();
        $("#rank_list").fadeIn();
    });
});

<input type='radio' name='op' id='op1'/>
<input type='radio' name='op' id='op2'/>

<div id="ban_length">demo</div>
<div id="rank_list">demo</div>

---

仅在单击的元素（即现在启用的单选按钮）上触发

change

事件。自动禁用单选按钮时不会触发该事件

因此，每次有一个单选按钮触发

change

事件时，您都需要检查所有单选按钮。不过，您需要能够将它们区分开来，因此，请首先为它们指定

id

s：

<input type="radio" name="op" id="radio_ban_length" />
<input type="radio" name="op" id="radio_rank_list" />

或者，如果您喜欢挑战，或者您可能有两台以上的收音机，您可以使用并执行以下操作：

function getDropdownId(radioId) {
    return '#' + radioId.replace(/^radio_/, '');
}

var radios = $('input:radio');

radios.change(function() {

    // Checked radio's:
    radios.filter(':checked').each(function(){
        var id = getDropdownId($(this).attr('id'));
        $(id).fadeIn();
    });

    // Unchecked radio's:
    radios.filter(':not(:checked)').each(function(){
        var id = getDropdownId($(this).attr('id'));
        $(id).fadeOut();
    });
});

请注意，此方法确实依赖于与下拉列表匹配的单选按钮的id（例如

单选按钮的长度
对于
单选按钮的长度
）


更新：这里有一个实时示例：
它们是同一
元素的成员吗？具有相同
名称的单选按钮之间的排他性仅在它们是同一表单的表单元素时有效。是的，它们是同一表单元素的成员。如果您已经有jQuery，我不会使用内联JavaScript。请显示其余内容你的相关代码也在这里。