Показать / Скрыть список параметров в зависимости от того, установлен ли флажок? Jquery - PullRequest
Новая
       14

Показать / Скрыть список параметров в зависимости от того, установлен ли флажок? Jquery

0 голосов
/ 20 января 2012

Вот как выглядит HTML, мне нужна помощь в написании jquery?Первоначально два div не будут показаны.Если пользователь выберет переключатель «Bk», он покажет слой «BreakdownList».Если выбран переключатель «One», отображается разделительный слой «One-on-OneList».Пользователям должно быть разрешено переключаться вперед и назад при отображении любого списка. 

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

Ответы [ 2 ]

2 голосов
/ 20 января 2012 
$(':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;
    }
});
0 голосов
/ 20 января 2012

Прежде всего, входы должны иметь одинаковое имя, чтобы пользователь мог выбирать между ними, в противном случае можно выбрать оба одновременно. Пример: 

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

В этом случае я бы предложил вам использовать класс ввода для события click и функции переключения 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();
});

Я думаю, что это правильно ответит на ваш вопрос.

...