javascript - 如何通过jQuery制作一个在线问卷调查-PHP中文网问答

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

//仅针对你的单选题，且每道题目都设置了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_u15822017-05-19 10:37:56 5楼

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

赞 +0

添加回复

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

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

赞 +0

添加回复

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

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

赞 +0

添加回复

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

第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_u15822017-05-19 10:37:56 1楼

$(function(){
            var item = {};
            item.length = 0;
            $("input").click(function(){//绑定点击事件
                if(!($(this).attr("name") in item)){
                    item.length = item.length + 1;
                }
                item[$(this).attr("name")] = $(this).attr("class");
                //console.log(item);
                
                if(item.length === 11){
                    countScore();
                }
            })
            function countScore(){//统计得分
                var total = 0;
                for(var i in item){
                    switch (item[i]){
                        case "a":
                            total = total+1;
                            break;
                        case "b":
                            total = total+2;
                            break;
                        case "c":
                            total = total+3;
                            break;
                        case "d":
                            total = total+4;
                            break;
                        default:
                            break;
                    }
                }
                console.log(total);
            } 
        })

赞 +0

添加回复