Question

我有点被困在某事上......

我的其他声明似乎没有正常工作。

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

当您点击选项-a时，您没有触发点击事件，因此它不会检查是否选中了选项-b。这应该工作：

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

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

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

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

});

Answer 3

您的事件处理程序附加到选项-b，因此当选项-ac被删除时它不会触发

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

Answer 4

它没有显示的原因是你只在选项B的点击事件上调用该函数：

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

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

因此，单击选项A不会调用任何内容，因此永远不会显示子选项。每当你点击B时，它当然会设置为true，以便该部分有效。

由于这些是单选按钮，您甚至不需要检查 - 只需为选项a：

添加单击事件

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

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

}

Answer 5

我已经为您更新了您的JS小提琴。它现在有效。 http://jsfiddle.net/VcVYM/10/

其他声明不起作用

5 个答案: