如何重新调查问卷“没有”#39;

时间:2014-08-04 13:05:16

标签: javascript jquery html

我正在尝试制作一份调查问卷,显示上一个问题得到回答之后的下一个问题。我设法让这个工作,但是当按下“否”时,我希望调查问卷重置为该答案并删除所有后面的问题,以便您可以从那一点开始。当我按“否”时我的表格变得疯狂,我无法理解它。有人可以帮助我吗?

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/

1 个答案:

答案 0 :(得分:1)

我已更新您的小提琴,请查看此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();
    });