前言

我们在项目开发过程中，经常会遇到页面html元素无法提前预设，而是通过某一些条件动态生成的情况，这里我们需要考虑如下几个因素：

1.需要动态创建的元素类型，比如TextBox, Radio, CheckBox等

2.每一个元素动态命名，确保ID唯一

3.如何获取每一个元素的值

目的

1.预先设定题库

2.创建试卷，并针对该试卷选择题目，题目类型包含单选题与多选题

3.在线生成电子试卷，用户在线考试

4.考试完毕后在线给出得分

代码

通过一个ajax请求，根据考试试卷的名称加载该试卷下所有的试题：

 public void GetItems()  
    {  
        var sqldb = SqlHelper.createdb("mts");  
        string strSql = "usp\_get\_items";  
        var dt = sqldb.GetDataTable(strSql);  
        var json = Library.JsonLib.DataTableToJson(dt);  
        Response.Write(json);  
        Response.End()  
    }

  function gen\_paper(paper\_name) {

        var strhtml\_single = "";    //题目类型-单选题  
        var strhtml\_double = "";    //题目类型-多选题  
        var sub\_single = "";    //单选题下面的题目  
        var sub\_double = ""; //多选题下面的题目  
        var main\_title = "";    //试卷名称  
        var strhtml\_operation = ""; //操作选项

        $.ajax({  
            type: "post",  
            url: "exam.aspx?Oper=gen\_paper&key=" + Math.random(),  
            data: { paper: encodeURIComponent(paper\_name) },  
            dataType: "json",  
            success: function (data) {  
                if (data != null) {  
                    strhtml\_single = "<span id='span\_single\_01' ><div style='font-weight:bold'>一 单选题</div></span></br>";  
                    strhtml\_double = "<span id='span\_double\_01' ><div style='font-weight:bold'>二 多选题</div></span></br>";  
                    main\_title = "<div style='font-weight:bold;font-size:30px'align='center'>" + paper\_name + "<div/>";  
                    strhtml\_operation = "<a id='btn\_save' href='javascript:void(0);' class='easyui-linkbutton c6' style='padding:0 30px;text-align:center' onclick='save\_result()'>提交</a>";  
                    $(main\_title).appendTo("#div\_main");  
                    $(strhtml\_single).appendTo("#div\_main");  
                    $(strhtml\_double).appendTo("#div\_main");  
                    $(strhtml\_operation).appendTo("#div\_main");  
                    $.parser.parse("#div\_main");  
                    for (var i = 0; i < data.length; i++) {  
                        if (data\[i\].TYPE\_NAME == "单选题") {  
                            single\_title\_id\_arr.push(data\[i\].FID);  
                            sub\_single = "</br><span>" + (i + 1).toString() + "." + data\[i\].TITLE + "</span></br><span>" + seting\_items(data\[i\].TYPE\_NAME, data\[i\].ITEMS, "radio\_" + i.toString()) + "</span></br>";  
                            $(sub\_single).appendTo("#span\_single\_01");  
                        }  
                        if (data\[i\].TYPE\_NAME == "多选题") {  
                            double\_title\_id\_arr.push(data\[i\].FID);  
                            sub\_double = "</br><span>" + (i + 1).toString() + "." + data\[i\].TITLE + "</span></br><span>" + seting\_items(data\[i\].TYPE\_NAME, data\[i\].ITEMS, "ckb\_" + i.toString()) + "</span></br>";  
                            $(sub\_double).appendTo("#span\_double\_01");  
                        }  
                    }  
                }  
            }  
        });  
    }

针对单选题与多选题分开处理，在动态创建元素的时候调用这个方法：

    function seting\_items(typeName, items, control\_name) {  
        if (typeName == "单选题") {  
            var \_single\_str = "";  
            var \_single\_value\_id = "";  
            var arr\_single = items.split("@");  
            for (var i = 0; i < arr\_single.length; i++) {

                if (i == 0) {  
                    \_single\_value\_id = "A";  
                }  
                if (i == 1) {  
                    \_single\_value\_id = "B";  
                }  
                if (i == 2) {  
                    \_single\_value\_id = "C";  
                }  
                if (i == 3) {  
                    \_single\_value\_id = "D";  
                }  
                \_single\_str += "<input  name='" + control\_name + "'  type='radio' value='" + \_single\_value\_id + "' />" + arr\_single\[i\] + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";

            }  
            return \_single\_str;  
        }

        if (typeName == "多选题") {  
            var \_double\_str = "";  
            var \_double\_value\_id = "";  
            var arr\_double = items.split("@");  
            for (var i = 0; i < arr\_double.length; i++) {

                if (i == 0) {  
                    \_double\_value\_id = "A";  
                }  
                if (i == 1) {  
                    \_double\_value\_id = "B";  
                }  
                if (i == 2) {  
                    \_double\_value\_id = "C";  
                }  
                if (i == 3) {  
                    \_double\_value\_id = "D";  
                }  
                \_double\_str += "<input  name='" + control\_name + "'  type='checkbox' value='" + \_double\_value\_id + "' />" + arr\_double\[i\] + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";  
            }

            return \_double\_str;  
        }  
    }

取值

元素动态创建完成之后，我们需要取值，方法如下：

    function getRadioBoxValue(radioName) { 

        for (i = 0; i < obj.length; i++) {

            if (obj\[i\].checked) {  
                return obj\[i\].value;  
            }  
        }  
        return "undefined";  
    }

    function getCheckBoxValue(checkBoxName) {  
        var obj = document.getElementsByName(checkBoxName);  
        var \_select\_list = "";  
        for (k in obj) {  
            if (obj\[k\].checked) {  
                \_select\_list += obj\[k\].value + ",";  
            }  
        }  
        \_select\_list = \_select\_list.substring(0, \_select\_list.length - 1);  
        return \_select\_list;

    }

取到用户选择的项目，我们就可以用来做进一步处理了，比如根据这个值判断用户是否考试合格等等！