확인란이 선택되어 있는지 여부에 따라 옵션 목록 표시/숨기기? Jquery

Question

html이 어떻게 생겼는지, jquery 작성에 도움이 필요합니까? 처음에는 두 개의 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 class="bk" name"input_name" value="Break Out Session" /> 

, 나는 다음과 같이 클릭 이벤트 및 JQuery와 토글 기능의 입력 클래스를 사용하도록 건의 할 것입니다 :

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

을 나는이 제대로 귀하의 질문에 대답 생각 .