我有几个单选按钮，最后一个控制另一组单选按钮的显示。
如果用户单击最后一个（具有子级别.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>
...
完整的HTML在此JSFiddle中:https://jsfiddle.net/fkl4dnj1/
但不管用。
你能帮我拿这个吗？
谢了。
这里是一个工作版本。 您可以通过添加一些类标记来区分外部表单输入元素。
null
$('.form-group-outer > 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');
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-step="1">
<h3>Question 1:</h3>
<!--<p class="lead">asasa sad sda dasdasdasdasdasdsadsadsa</p>-->
<div class="form-group form-group-outer">
<label class="container_radio">I want bananas
<input type="radio" name="q1[]" value="1" class="required">
<span class="checkmark"></span>
</label>
</div>
<div class="form-group form-group-outer">
<label class="container_radio">I want pears
<input type="radio" name="q1[]" value="2" class="required">
<span class="checkmark"></span>
</label>
</div>
<div class="form-group form-group-outer">
<label class="container_radio">I want apples
<input type="radio" name="q1[]" value="3" class="required">
<span class="checkmark"></span>
</label>
<div class="row sub-question" style="display: none">
<h3 class="col-12">What color do you want?</h3>
<div class="form-group col-12">
<label class="container_radio">Red
<input type="radio" name="q1_1[]" value="1" class="required">
<span class="checkmark"></span>
</label>
</div>
<div class="form-group col-12">
<label class="container_radio">Green
<input type="radio" name="q1_1[]" value="1" class="required">
<span class="checkmark"></span>
</label>
</div>
<div class="form-group col-12">
<label class="container_radio">Yellow
<input type="radio" name="q1_1[]" value="1" class="required">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
问题是辅助单选按钮有一个“form-group”父按钮，因此它们被作为主单选按钮处理。
您可以为前三个单选按钮指定一个额外的类，并更新您的单击处理程序:
$('.form-group > label').find(' > input:checkbox.main_question, > input:radio.main_question').on('click', function() {
/// ...
});
以下是更新后的fiddle:https://jsfiddle.net/op6fy842/
