我有几个单选按钮和复选框来控制一个子层div。
问题是当用户使用子答案激活答案时，在用户选择另一个单选按钮后，它隐藏了几秒钟前打开的子级别。
请问我该如何解决这个问题？
重现问题的步骤:
>
选择答案%1。
然后在子级中的答案A。
则子级别将被隐藏，而它不应该被隐藏。
null
$('.form-group > label').find('> input:checkbox, > input:radio').on('change', function () {
if (!$(this).closest('.row').hasClass('sub-question')) {
el = $(this).closest('.form-group').find('.sub-question');
if (el.length > 0 && $(this).is(':checked')) { el.css('display', 'block'); }
else {
if ($(this).attr('type') == 'radio') {
$(this).closest('.group-container').find('.sub-question').hide();
}
else {
$(this).closest('.form-group').find('.sub-question').css('display', 'none');
}
$(this).closest('.form-group').find('.sub-question :input[type="radio"], .sub-question :input[type="checkbox"]').each(function (index) {
$(this).prop('checked', false);
});
}
}
});.sub-question {
display: none;
background: grey;
}
.tab:not(:first-child) {
display: none;
}
.col-4 {
width: 25% !important;
}
.col-6 {
width: 50% !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6 col-lg-6 col-xl-6 p-0 bg-cover gray-light-bg">
<div id="estimator" class="spacer pb-5 col-12 position-relative">
<form id="estimator-form" action="">
<div data-step="1" class="tab">
<div class="group-container">
<h3>Question 1</h3>
<div class="form-group form-group-outer">
<label class="container_check">Answer 1
<input type="checkbox" name="q3[]" value="1">
<span class="checkmark"></span>
</label>
<div class="row sub-question">
<h3 class="col-12">Sub answers</h3>
<div class="row">
<div class="form-group col-6">
<label class="container_radio">Answer A
<input type="radio" name="q3_1[]">
<span class="checkmark"></span>
</label>
</div>
<div class="form-group col-6">
<label class="container_radio">Answer B
<input type="radio" name="q3_1[]">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div class="form-group form-group-outer">
<label class="container_check">Answer 2
<input type="checkbox" name="q3[]" value="2">
<span class="checkmark"></span>
</label>
<div class="row sub-question">
<h3 class="col-12">Sub answers</h3>
<div class="row">
<div class="form-group col-4">
<label class="container_check">Answer A
<input type="checkbox" name="q3_2[]" value="1">
<span class="checkmark"></span>
</label>
</div>
<div class="form-group col-4">
<label class="container_check">Answer B
<input type="checkbox" name="q3_2[]" value="2">
<span class="checkmark"></span>
</label>
</div>
<div class="form-group col-4">
<label class="container_check">Answer C
<input type="checkbox" name="q3_2[]" value="3">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="container_check">Answer 3
<input type="checkbox" name="q3[]" value="3">
<span class="checkmark"></span>
</label>
</div>
<div class="form-group">
<label class="container_check">Answer 4
<input type="checkbox" name="q3[]" value="4">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</form>
</div>
</div>null
这就是你想要的吗？ 或者在某个特定的事件中，sub回答结束？
我碰巧:
$(this).closest（“。group-container”）。find（“。sub-question”）。hide（）；
致:
$(this).closest('.form-group').find('.sub-question').hide()；
null
$('.form-group > label').find('> input:checkbox, > input:radio').on('change', function() {
if (!$(this).closest('.row').hasClass('sub-question')) {
el = $(this).closest('.form-group').find('.sub-question');
if (el.length > 0 && $(this).is(':checked')) {
el.css('display', 'block');
} else {
if ($(this).attr('type') == 'radio') {
$(this).closest('.form-group').find('.sub-question').hide();
} else {
$(this).closest('.form-group').find('.sub-question').css('display', 'none');
}
$(this).closest('.form-group').find('.sub-question :input[type="radio"], .sub-question :input[type="checkbox"]').each(function(index) {
$(this).prop('checked', false);
});
}
}
});.sub-question {
display: none;
background: grey;
}
.tab:not(:first-child) {
display: none;
}
.col-4 {
width: 25% !important;
}
.col-6 {
width: 50% !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6 col-lg-6 col-xl-6 p-0 bg-cover gray-light-bg">
<div id="estimator" class="spacer pb-5 col-12 position-relative">
<form id="estimator-form" action="">
<div data-step="1" class="tab">
<div class="group-container">
<h3>Question 1</h3>
<div class="form-group form-group-outer">
<label class="container_check">Answer 1
<input type="checkbox" name="q3[]" value="1">
<span class="checkmark"></span>
</label>
<div class="row sub-question">
<h3 class="col-12">Sub answers</h3>
<div class="row">
<div class="form-group col-6">
<label class="container_radio">Answer A
<input type="radio" name="q3_1[]">
<span class="checkmark"></span>
</label>
</div>
<div class="form-group col-6">
<label class="container_radio">Answer B
<input type="radio" name="q3_1[]">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div class="form-group form-group-outer">
<label class="container_check">Answer 2
<input type="checkbox" name="q3[]" value="2">
<span class="checkmark"></span>
</label>
<div class="row sub-question">
<h3 class="col-12">Sub answers</h3>
<div class="row">
<div class="form-group col-4">
<label class="container_check">Answer A
<input type="checkbox" name="q3_2[]" value="1">
<span class="checkmark"></span>
</label>
</div>
<div class="form-group col-4">
<label class="container_check">Answer B
<input type="checkbox" name="q3_2[]" value="2">
<span class="checkmark"></span>
</label>
</div>
<div class="form-group col-4">
<label class="container_check">Answer C
<input type="checkbox" name="q3_2[]" value="3">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="container_check">Answer 3
<input type="checkbox" name="q3[]" value="3">
<span class="checkmark"></span>
</label>
</div>
<div class="form-group">
<label class="container_check">Answer 4
<input type="checkbox" name="q3[]" value="4">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</form>
</div>
</div>