チェックボックスが選択されているかどうかに応じてオプションの一覧を表示/非表示にしますか？ Jquery

Question

ここで、htmlの外観はどうですか？私はjqueryを書くのに助けが必要ですか？ 最初に2つのdivが表示されません。ユーザーが "Bk"ラジオボタンを選択すると、 "BreakdownList" divレイヤーが表示されます。ラジオボタン「One」が選択されている場合、「One-on-OneList」のdivレイヤーが表示されます。ユーザーはどちらのリストを表示しても前後に切り替えることができます。

<b> Monday, May 2, 2011 - Session Two </b> <br> 
<input name="Bk" type="radio" value="Break Out Session" >Break Out Session <br> 
<input name="One" type="radio" value="One-on-One Consulting Session" >One-on-One Consulting Session 
<div class="BreakdownList" style="display:none"> 
    <input name="1" type="radio" value="Session1">Session 1<br> 
    <input name="2" type="radio" value="Session2">Session 2<br> 
    <input name="2" type="radio" value="Session2">Session 3<br> 
</div> 
<div class="One-on-OneList" style="display:none"> 
    <input name="1" type="radio" value="One1">One on One 1<br> 
    <input name="2" type="radio" value="One2">One on One 2<br> 
    <input name="3" type="radio" value="One3">One on One 3<br> 
</div> 

Answer 1

$(':radio').on('click', function() { 
    var name = $(this).prop('name'); 
    switch (name) { 
    case 'Bk': 
     $('div.BreakdownList').show(); 
     $('div.One-on-OneList').hide(); 
     break; 
    case 'One': 
     $('div.BreakdownList').hide(); 
     $('div.One-on-OneList').show(); 
     break; 
    default: 
     break; 
    } 
}); 

Answer 2

まず、入力は、それ以外の場合は、同時に両方を選択することは可能ですが、それらの間で選択するようにユーザーを聞かせするために、同じ名前を持つ必要があります。 例：

$('input.bk').click(function() { 
    $('div.One-on-OneList').hide(); 
    $('div.BreakdownList').toggle(); 
}); 
$('input.one').click(function() { 
    $('div.BreakdownList').hide(); 
    $('div.One-on-OneList').toggle(); 
}); 

私は、これは正しくあなたの質問に答えると思う：この場合

<input class="bk" name"input_name" value="Break Out Session" /> 

、私はこのように、クリックイベントとjqueryのトグル機能上の入力クラスを使用することができことをお勧めしたいです。