еще заявление не работает

Question

Я как-то застрял на чем-то ...

Кажется, мое утверждение else не работает правильно.

<div class="main-options">
    <label class="main-label" for="main-options">Main Options:</label>
    <input class="option-a" type="radio" name="main-options">
    <label for="main-options">Option A</label>
    <input class="option-b" type="radio" name="main-options">
    <label for="main-options">Option B</label>
</div>

<div class="sub-options">
    <label class="sub-options-label" for="sub-options">Sub Options:</label>
    <input class="option-c" type="radio" name="sub-options">
    <label for="main-options">Option A</label>
    <input class="option-d" type="radio" name="sub-options">
    <label for="sub-options">Option B</label>
</div>

Javascript:

$('.option-b').click(function() {
    if ($(this).is(':checked')) {
         $('.sub-options').hide();
    }
    else {
        $('.sub-options').show();
    }
});

jsFiddle: http://jsfiddle.net/VcVYM/

Моя цель - иметь возможность щелкнуть опцию B и скрыть подопцию div.Но когда опция B не: отмечена, я хочу, чтобы подопции снова появлялись ...

Мне удалось скрыть ее после того, как опция-b отмечена, но мой оператор else непохоже, что он показывает подопцию div, когда он не отмечен.

Спасибо, что заглянули!

D

Answer 1

Вам нужно добавить обработчик щелчка для обеих переключателей

$('.option-b, .option-a').click(function() {
    if ($('.option-b').is(':checked')) {
         $('.sub-options').hide();
    }             
    else {
        $('.sub-options').show();
    }
});

Answer 2

Я обновил вашу JS Fiddle для вас. Теперь это работает. http://jsfiddle.net/VcVYM/10/

Answer 3

Причина, по которой он не отображается, заключается в том, что вы вызываете эту функцию только в событии щелчка опции B:

$('.option-b').click(function() {

if ($(this).is(':checked')) {
     $('.sub-options').hide();
}         
else {
    $('.sub-options').show();
}

Поэтому нажатие на опцию A ничего не вызывает, поэтому подопции никогда не отображаются. Каждый раз, когда вы нажимаете B, он, конечно, устанавливает значение true, чтобы эта часть работала.

Поскольку это радио-кнопки, вам даже не нужна проверка - просто добавьте событие щелчка для опции:

$('.option-a').click(function() {

    $('.sub-options').show();

}

Answer 4

Ваш обработчик событий присоединен к опции-b, поэтому он не сработает, когда опция-a заблокирована

$('.option-b').click(function() { $('.sub-options').hide(); } );
$('.option-a').click(function() { $('.sub-options').show(); } );

Answer 5

Вы не запускаете событие click, когда нажимаете на опцию -a, и, таким образом, он не будет проверять, отмечена ли опция -b или нет. Это должно работать, хотя:

$('.option-a, .option-b').click(function() {

    if ($(this).hasClass('option-a')) {

        $('.sub-options').hide();

    }
    else {
        $('.sub-options').show();
    }

});