Jquery 是否显示/隐藏选项列表取决于是否选中复选框?滑动分页

Jquery 是否显示/隐藏选项列表取决于是否选中复选框?滑动分页,jquery,radio-button,show-hide,Jquery,Radio Button,Show Hide,下面是html的样子,我需要帮助编写jquery吗? 最初,两个div将不显示。如果用户选择单选按钮“Bk”,它将显示“BreakdownList”div layer。如果选择单选按钮“一”,则显示“一对一列表”div层。应允许用户来回切换显示任一列表 <b> Monday, May 2, 2011 - Session Two </b> <br> <input name="Bk" type="radio" value="Break Out Sessio

下面是html的样子,我需要帮助编写jquery吗? 最初,两个div将不显示。如果用户选择单选按钮“Bk”,它将显示“BreakdownList”div layer。如果选择单选按钮“一”,则显示“一对一列表”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>
2011年5月2日星期一-第二节
中断会话
一对一咨询会议 第1课时
第2课时
第3课时
一对一1
一对一2
一对一3

首先,输入应具有相同的名称,以便用户在两者之间进行选择,否则可以同时选择两者。 例:


我认为这正确地回答了您的问题。

您的单选按钮需要具有相同的名称才能分组使用单选按钮作为选择器,另外使用:checked选择器并切换()
$(':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;
    }
});
<input class="bk" name"input_name" value="Break Out Session" />
$('input.bk').click(function() {
    $('div.One-on-OneList').hide();
    $('div.BreakdownList').toggle();
});
$('input.one').click(function() {
    $('div.BreakdownList').hide();
    $('div.One-on-OneList').toggle();
});