Javascript/jQueryの問題

Question

私はラジオボタンをアクティブにしたときにドロップダウンを表示しようとしています。私はすでにそれを表示させることができますが、私は別のラジオボタンをクリックしたとき、それは1を示しているが、他の... コード隠さない：私はJavaScriptを取り除くことをお勧めしますが

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

Answer 1

JavaScriptのセクション：

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

デモ：

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();'/> 

を要素自体から、idを与えて、$(theID).change(function(){...で別のスクリプトにjavascriptを追加します。

また、すぐに非表示にする場合はfadeOutの代わりにhideを使用できます。

最後に1つの提案。 2つだけではなく、これらの多くがある場合は、フェードインする各要素に共有クラスを追加します。hideの代わりに$(".className").hide()を呼び出して、表示されているものをすべて非表示にしてください。

Answer 3

、あなたのラジオあなたのjqueryのセクションで

にID = "禁止" とid = "ランク" を追加ラジオボタンをクリックハンドラを追加

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

Answer 4

クリックされた要素にchangeイベントのみ起動（すなわち現在有効になっているラジオボタン）。ラジオボタンが自動的に無効になっても、起動しません。

したがって、いずれかのラジオボタンがchangeイベントをトリガーするたびに、すべてのラジオボタンをチェックする必要があります。場合は、代わりに

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

：あなたが正しいドロップダウンを切り替えるためにそれらを使用することができ、その後

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

：あなたはしかし、それらを区別するので、彼らにid Sを与えることによって開始できるようにする必要がありますあなたは挑戦が好きか、あなたは2ラジオの以上のものを持っている可能性がある場合、あなたはこのような何かをfilter()と:checkedを使用することができます。

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と一致するラジオボタンのIDに依存します（例：のためのradio_ban_length）。

---

アップデート：ここライブの例です：http://jsfiddle.net/55ANB/1/