使用jQuery单击单选按钮更改显示

我有几个单选按钮，最后一个控制另一组单选按钮的显示

如果用户单击最后一个按钮（带有子级别

.sub-question

），我想显示子级别单选按钮

我的问题：实际上，如果用户单击子级别单选按钮，它会隐藏

.sub-question

部分

我用的是：

$('.form-group > label').find(' > input:checkbox, > input:radio').on('click', function() {

    el = $(this).closest('.form-group').find('.sub-question');

    if(el.length > 0) {
        el.css('display', 'block');
    }
    else {
        $('.sub-question').css('display', 'none');
    }
});

我的HTML如下所示：

...
<div class="form-group">
    <label>Item A
        <input type="radio">
    </label>
</div>
<div class="form-group">
    <label>Item B
        <input type="radio">
    </label>
    <div class="row sub-question">
        <div class="form-group">
            <label class="container_radio">Sub level 1
                <input type="radio">
            </label>
        </div>
    </div>
</div>
...

。。。
项目A
B项
次级1
...

完整的HTML在此JSFIDLE中：

但它不起作用

你能帮我做这个吗

---

谢谢。

这是一个工作版本。您可以通过添加一些类标记来区分外部表单输入元素

$（'.form group outer>label'）。查找（'>input:checkbox，>input:radio'）。打开（'click'，function（）{
el=$（this）.closest（'.formgroup'）.find（'.sub-question'）；
如果（标高长度>0）{
el.css（‘显示’、‘块’）；
}
否则{
$（'.sub-question'）.css（'display'，'none'）；
}
});

问题1：
我想要香蕉
我想要梨
我想要苹果
你想要什么颜色的？
红色
绿色
黄色的
问题在于辅助单选按钮有一个“表单组”父按钮，因此它们被当作主单选按钮处理

您可以为前三个单选按钮指定一个附加类，并更新单击处理程序：


以下是更新的小提琴：

$('.form-group > label').find(' > input:checkbox.main_question, > input:radio.main_question').on('click', function() {
   /// ...
});