我正在尝试构建一个问卷,以显示回答前一个问题后的下一个问题。我设法完成了这项工作,但是当您按“否”时,我希望调查表重设该答案并删除所有以后的问题,以便您可以从此重新开始。现在,当我按“否”时,我的表格变得发疯了,我无法理解。有人可以帮我吗?
HTML:
<p>1. Question 1</p>
<label><input class="toggler" id="radio1" type="radio" name="toggler" value="1" /> Yes</label>
<label><input class="toggler" id="radio2" type="radio" name="toggler" value="2" /> No</label>
<div id="blk-1" style="display:none"><!-- 1. Choice: Yes -->
<p>1. Question 2</p>
<label><input class="toggler" id="radio1" type="radio" name="toggler2" value="3" /> Yes</label>
<label><input class="toggler" id="radio2" type="radio" name="toggler2" value="4" /> No</label>
</div><!-- /blk-1 -->
<div id="blk-2" class="toHide" style="display:none"><!-- 1. Choice: No -->
No
</div><!-- /blk-2 -->
<div id="blk-3" style="display:none"><!-- 2. Choice: Yes -->
<p>3. Question 3</p>
<label><input class="toggler" id="radio1" type="radio" name="toggler3" value="5" /> Yes</label>
<label><input class="toggler" id="radio2" type="radio" name="toggler3" value="6" /> No</label>
</div><!-- /blk-3 -->
<div id="blk-4" class="toHide" style="display:none"><!-- 2. Choice: No -->
No
</div><!-- /blk-4 -->
<div id="blk-5" class="toHide" style="display:none"><!-- 3. Choice: Yes -->
Yes - End
</div><!-- /blk-4 -->
<div id="blk-6" class="toHide" style="display:none"><!-- 3. Choice: No -->
No - End
</div><!-- /blk-4 -->
Javascript:
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$(".toggler").click(function() {
$('.toHide').hide();
$("#blk-" + $(this).val()).toggle();
});
});
});
</script>
小提琴:
http://jsfiddle.net/ximmo/94Vjn/2/
最佳答案
我已经更新了您的小提琴,请查看此Fiddle。
jQuery的
$(".toggler").click(function() {
$('.toHide').hide();
if($(this).attr("id") == "radio2"){
var selector = $(this).parents("div").next("div");
while(selector.length == 1){
selector.hide();
selector.find(".toggler").prop("checked",false);
selector = selector.next("div");
}
}
$("#blk-" + $(this).val()).toggle();
});