搜索

首页  >  问答  >  正文

javascript - 如何通过jQuery制作一个在线问卷调查

打算做一个在线的纯前端的问卷调查，一共有十个题目，选择A得一分，选B得两分，选C得三分，选D得四分，然后最后直接弹出结果，目前我遇到的问题是比如用户在第一题选择了A之后，如果之后他修改他的答案为B，那么他的分数并不会减去一分再重新加两分，请问能用什么方法解决这个问题？谢谢

<body>
    <!-- 第一页 -->
    <section class="page1">
        <p class="swipers logo">
            <p class="welcome">
                <h3>主标题</h3>
                <p>副标题</p>
            </p>
            <a href="#" class="start">开始测试</a>
        </p>
    </section>

    <!-- 第二页 -->
    <section class="page2">
        <header class="head">
            <p class="swiper-pagination swiper-pagination-bullets pagination">
            </p>
        </header>
        <p class="swipers">
            <p class="swiper-container swiper-container-horizontal">
                <p class="swiper-wrapper">
                    <!-- 问题1 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>1</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="1" value="1"><span class="aFont">aaaaa</span>
                            </label>
                            <label>
                                <input type="radio" class="b" name="1" value="2"><span class="bFont">bbbbb</span>
                            </label>
                            <label>
                                <input type="radio" class="c" name="1" value="3"><span class="cFont">ccccc</span>
                            </label>
                            <label>
                                <input type="radio" class="d" name="1" value="4"><span class="dFont">ddddd</span>
                            </label>
                        </p>
                    </p>

                    <!-- 问题2 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>2</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="2">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="2">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="2">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="2">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题3 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>3</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="3">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="3">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="3">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="3">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题4 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>4</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="4">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="4">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="4">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="4">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题5 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>5</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="5">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="5">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="5">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="5">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题6 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>6</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="6">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="6">b
                            </label>
                                <label>
                                <input type="radio" class="c" name="6">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="6">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题7 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>7</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="7">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="7">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="7">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="7">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题8 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>8</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="8">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="8">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="8">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="8">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题9 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>9</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="9">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="9">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="9">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="9">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题10 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>10</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="10">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="10">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="10">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="10">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题11 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>11</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="11">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="11">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="11">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="11">d
                            </label>
                        </p>
                    </p>

                </p>
            </p>
        </p>
    </section>

    <!-- 第三页 -->
    <section class="page3">
        <p class="result">
            <p id="result">这是结果</p>
        </p>
    </section>
</body>
<script>
        //记分设置
        $(document).ready(function(){
            $(".choice input[type = 'radio']").on("click",count);
        });
        //count设置

        function count(){
            var localResult = 0;
            for (var i = 1;i <= 10;i++){
                var option = $(".choice input[name = '"+i+"']:checked");
                if (option.attr("class")){
                    var score = 0;
                    switch (option.attr("class")){
                        case "a":
                            score = score + 1;
                            break;
                        case "b":
                            score = score + 2;
                            break;
                        case "c":
                            score = score + 3;
                            break;
                        case "d":
                            score = score + 4;
                            break;
                        default :
                            break;
                    }
                    localResult += score;
                }
            }
            console.log(localResult);
            if (localResult <= 10){
                $("#result").text("小于等于10")
            }else if (localResult <= 20){
                $("#result").text("小于等于20")
            }else if (localResult <= 30){
                $("#result").text("小于等于30")
            }else{
                $("#result").text("小于等于40")
            }
        }
</script>
世界只因有你世界只因有你2753 天前775

全部回复(6)我来回复

  • 我想大声告诉你

    我想大声告诉你2017-05-19 10:37:56

    //仅针对你的单选题，且每道题目都设置了value
    //虽然你说是十道而所贴代码中为11道,长度依然取的10

    $(document).ready(function() {
    //存储选项值
    var valueArr = [];
    //总分值
    var value = 0;
    //已选长度
    var checkedLength;
    //题目个数
    var length = 10;
    //分值存入valueArr
    function count() {
        var $parent = $(this).parents('.swiper-slide');
        console.log($parent,$parent.index('.swiper-slide'))
        valueArr[$parent.index('.swiper-wrapper .swiper-slide')] = $(this).val();
        //触发自定义事件
        $('.swiper-wrapper').trigger('valueChange');
    }
    //点击触发计分
    $(".choice input[type = 'radio']").on("click", count);
    //绑定自定义事件
    $('.swiper-wrapper').on('valueChange',function(){
        checkedLength = $('.choice input:checked').length;
        //判断是否全选
        if(checkedLength==length){
            value = 0;
            console.log(valueArr)
            valueArr.forEach(function(i){
                value += Number(i);
            })
            $('#result').html(value);
        }
    })
});

    回复
    0
  • phpcn_u1582

    phpcn_u15822017-05-19 10:37:56

    他提交问卷的时候才把所有input的value值加起来不就可以了

    回复
    0
  • 高洛峰

    高洛峰2017-05-19 10:37:56

    其实不能这样算。计算用户的分数的时候就是重新统计一下，那么如果这样做的话，怎么会出现-1+2这样的情况。这可能是重新累加

    回复
    0
  • 阿神

    阿神2017-05-19 10:37:56

    若是10道题选完后才弹出总分数，可以在最后获取所有题目的被选的答案对应的分数不就好了，没必要选择时立刻累加。

    回复
    0
  • 世界只因有你

    世界只因有你2017-05-19 10:37:56

    第11道题，你怎么点，分数都不加也不减。

    因为你没有对它进行计算，代码不用变化，把10改成11就可以了。

    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
<body>
    <!-- 第一页 -->
    <section class="page1">
        <p class="swipers logo">
            <p class="welcome">
                <h3>主标题</h3>
                <p>副标题</p>
            </p>
            <a href="#" class="start">开始测试</a>
        </p>
    </section>

    <!-- 第二页 -->
    <section class="page2">
        <header class="head">
            <p class="swiper-pagination swiper-pagination-bullets pagination">
            </p>
        </header>
        <p class="swipers">
            <p class="swiper-container swiper-container-horizontal">
                <p class="swiper-wrapper">
                    <!-- 问题1 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>1</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="1" value="1"><span class="aFont">aaaaa</span>
                            </label>
                            <label>
                                <input type="radio" class="b" name="1" value="2"><span class="bFont">bbbbb</span>
                            </label>
                            <label>
                                <input type="radio" class="c" name="1" value="3"><span class="cFont">ccccc</span>
                            </label>
                            <label>
                                <input type="radio" class="d" name="1" value="4"><span class="dFont">ddddd</span>
                            </label>
                        </p>
                    </p>

                    <!-- 问题2 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>2</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="2">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="2">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="2">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="2">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题3 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>3</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="3">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="3">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="3">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="3">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题4 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>4</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="4">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="4">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="4">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="4">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题5 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>5</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="5">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="5">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="5">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="5">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题6 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>6</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="6">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="6">b
                            </label>
                                <label>
                                <input type="radio" class="c" name="6">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="6">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题7 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>7</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="7">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="7">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="7">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="7">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题8 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>8</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="8">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="8">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="8">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="8">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题9 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>9</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="9">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="9">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="9">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="9">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题10 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>10</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="10">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="10">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="10">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="10">d
                            </label>
                        </p>
                    </p>

                    <!-- 问题11 -->
                    <p class="swiper-slide">
                        <p class="question">
                            <h3>11</h3>
                        </p>
                        <p class="choice">
                            <label>
                                <input type="radio" class="a" name="11">a
                            </label>
                            <label>
                                <input type="radio" class="b" name="11">b
                            </label>
                            <label>
                                <input type="radio" class="c" name="11">c
                            </label>
                            <label>
                                <input type="radio" class="d" name="11">d
                            </label>
                        </p>
                    </p>

                </p>
            </p>
        </p>
    </section>

    <!-- 第三页 -->
    <section class="page3">
        <p class="result">
            <p id="result">这是结果</p>
        </p>
    </section>
</body>
<script>
        //记分设置
        $(document).ready(function(){
            $(".choice input[type = 'radio']").on("click",count);
        });
        //count设置

        function count(){
            var localResult = 0;
            for (var i = 1;i <= 11;i++){
                var option = $(".choice input[name = '"+i+"']:checked");
                if (option.attr("class")){
                    var score = 0;
                    switch (option.attr("class")){
                        case "a":
                            score = score + 1;
                            break;
                        case "b":
                            score = score + 2;
                            break;
                        case "c":
                            score = score + 3;
                            break;
                        case "d":
                            score = score + 4;
                            break;
                        default :
                            break;
                    }
                    localResult += score;
                }
            }
            console.log(localResult);
            if (localResult <= 10){
                $("#result").text("小于等于10")
            }else if (localResult <= 20){
                $("#result").text("小于等于20")
            }else if (localResult <= 30){
                $("#result").text("小于等于30")
            }else{
                $("#result").text("小于等于40")
            }
        }
</script>

    回复
    0
  • phpcn_u1582

    phpcn_u15822017-05-19 10:37:56

    雷雷

    回复
    0
  • 取消回复