jQuery to add code for single-choice multiple-choice questions

Click Add to add questions, you can add single-choice or multiple-choice questions, options can be added to reduce options, fill in the scores for selecting this option, click save, save to json, and save to database when used
code show as below:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>index</title>

    <script src="jquery.js" type="text/javascript"></script>

    <div id="all">

    </div>
    <div id="form">
        <div class="title">题目:<input type="text" id="title" /></div>
        <div class="sm">单选/多选 <span><input type="radio" value="s" name="sm" checked="checked"/>单选</span>
            <span><input type="radio" value="m" name="sm" />多选</span></div>
        <div>
            <span id="options" style="display: inline-block" >
                 <div>
                    <input type="text" >
                     <input type="number" >
                </div>
                 <div>
                    <input type="text" >
                     <input type="number" >
                </div>
                <div>
                    <input type="text" >
                    <input type="number" >
                </div>
             </span>
                <button id="more" style="display: inline-block">+More</button>
        </div>
        <div><button id="save">+Save</button></div>
    </div>

</head>
<body>

<script>
    var json=[{
        title:"题目1",
        option:[
            {
                id:1,
                title:'答案A',
                point:3
            },{
                id:2,
                title:'答案B',
                point:2
            },{
                id:3,
                title:'答案C',
                point:1
            }
        ],
        sm:'s'
    },{
        title:"题目2",
        option:[
            {
                id:1,
                title:'答案1',
                point:3
            },{
                id:2,
                title:'答案2',
                point:2
            },{
                id:3,
                title:'答案3',
                point:1
            }
        ],
        sm:'s'
    },{
        title:"题目3",
        option:[
            {
                id:1,
                title:'选项A ',
                point:3
            },{
                id:2,
                title:'选项B',
                point:2
            },{
                id:3,
                title:'选项C',
                point:1
            }
        ],
        sm:'m'
    }];
    $(function(){
        var html="";

        json.forEach(function(item,index){
            html+="<div class='title'>"+item.title+"</div><div class='title'>"+(item.sm=="s"?"单选":"多选")+"</div>";
            html+="<ul>";
           item.option.forEach(function(it){
               html+="<li><span class='attr_name'>"+it.title+"</span><span class='attr_point'>"+it.point+"</span></li>";
           });
            html+="</ul>";
        });

        html+="<button id='add'>+Add</button>";

        $("#all").html(html);

        $("#form").hide();
    });

    $("#add").live("click",function(){
        if($("#form").css("display")=="none"){
            $("#form").show();
            $("#add").html("Hide");
        }else{
            $("#form").hide();
            $("#add").html("+Add");
        }
    });
    $("#more").live("click",function(){
        var html="<div><input type='text'>  <input type='number' ><button class='remove'>-Remove</button></div>";
        $("#options").append(html);
    });

    $(".remove").live("click",function(){
        $(this).parent().remove();
    });

    $("#save").live("click",function(){
        var title=$("#form .title input").val();
        if(!title){
            alert("填写的标题不能为空");
            return false;
        }
        var sm=$("#form input[name='sm']:checked").val();
        var texts=$("#options input[type='text']");
        var numbers=$("#options input[type='number']");
        console.log("numbers",numbers);


        var option_titles=[];
        var bool_text=true;
        texts.each(function(item){
            if($(this).val().length==0){
                bool_text=false;
            }
            option_titles.push($(this).val());
        });

        if(!bool_text){
            alert("填写的项不能为空");
            return false;
        }


        var option_points=[];
        var bool_point=true;
        numbers.each(function(item){
            if($(this).val().length==0){
                bool_point=false;
            }
            option_points.push($(this).val());
        });

        if(!bool_point){
            alert("填写的项分值不能为空");
            return false;
        }

        console.log("option_titles",option_titles);
        console.log("option_points",option_points);

        var item={};
        item.title=title;
        item.sm=sm;

        var options=[];
        option_titles.forEach(function(it,index){
            options.push({"id":(index+1),"title":it,"point":option_points[index]});
        });

        item.option=options;

        $("#form").hide();

        json.push(item);

        var html="";
        json.forEach(function(item,index){
            html+="<div class='title'>"+item.title+"</div><div class='title'>"+(item.sm=="s"?"单选":"多选")+"</div>";
            html+="<ul>";
            item.option.forEach(function(it){
                html+="<li><span class='attr_name'>"+it.title+"</span><span class='attr_point'>"+it.point+"</span></li>";
            });
            html+="</ul>";
        });

        html+="<button id='add'>+Add</button>";

        $("#all").html(html);
        console.log("json",json);



    });


</script>
</body>
</html>
jQuery to add code for single-choice multiple-choice questions

Guess you like
