jQuery添加单选多选题的代码

点击添加可以添加题目，可以添加单选或者多选题目，选项可以添加可以减少选项，填写选择此选项的分数，点击保存，保存到json，使用的时候可以保存到数据库
代码如下：
<!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添加单选多选题的代码

猜你喜欢
