根据是否选中复选框显示/隐藏选项列表？ jQuery答案

【问题标题】：Show/Hide a list of options depending if a checkbox is selected? Jquery根据是否选中复选框显示/隐藏选项列表？ jQuery
【发布时间】：2012-01-21 01:21:52
【问题描述】：

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

【问题讨论】：

您的单选按钮需要具有相同的名称才能进行分组
使用收音机作为选择器，另外使用 :checked 选择器并切换（）它

标签： jquery radio-button show-hide

【解决方案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;
    }
});

【讨论】：

【解决方案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();
});

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

【讨论】：