Question

I m trying to make radio buttons that when you have them active, it displays a dropdown. I can already make it display, but when I click on another radio button, it shows one, but doesn t hide the other... Code:

<input type= radio  name= op  onchange= $("#ban_length").fadeToggle(); />
<input type= radio  name= op  onchange= $("#rank_list").fadeToggle(); />

Answer 1

<>Java节:

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

HTML:

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

<>Demo:

http://jsfiddle.net/b2UPt/1/

Answer 2

<input type= radio  name= op  onchange= $("#ban_length").fadeIn();$("#rank_list").fadeOut(); />
<input type= radio  name= op  onchange= $("#rank_list").fadeIn();$("#ban_length").fadeOut(); />

虽然我建议从这些要素本身中删除java字母,将其放在id上,并将java字母添加到一个单独的文字上$(theID)。

或者,如果你愿意立即隐藏,你可以使用<代码>hide而不是fadeOut。

最后一项建议。如果其中有许多,而不仅仅是2个,我将在你所放弃的每个要素中增加一个共同的类别。然后,就每个要素而言,不使用<代码>hide ,而只打上$(}Name”)hide(,以掩盖任何可能可见之处。

Answer 3

<密码>change活动仅对被点击的元件(即现在能够使用的无线电台)开火。当无线电塔顿自动残疾时,它就发射。

因此,每当一个无线电台触发<代码>change活动时,你必须检查所有无线电台。你们需要能够把他们分开,但首先要向他们颁发<条码>id:

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

之后,你可以利用他们来探讨正确的下降:

$( input:radio ).change(function() {
    var id = $(this).attr("id");

    if (id === "radio_ban_length") {
        $("ban_length").fadeIn();
        $("rank_list").fadeOut();
    } else {
        $("rank_list").fadeIn();
        $("ban_length").fadeOut();
    }
});

或者,如果你喜欢一种挑战,或者如果你可能有两个以上的无线电台,你可以使用filter(和 <<<<<>> 做这样的事情:

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

Note that this method does rely on the id s of the radio buttons matching those of the dropdowns (e.g. radio_ban_length for ban_length).

最新情况:此处为live example: http://jsfiddle.net/55ANB/1/。

Answer 4

在贵国的电台中添加id=“ban”和id=“rank”。

在您的jquery科,在无线电台加点击手

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

友情链接