JQuery动态添加控件并取值

Html

Css

$(document).ready(function() {
    init();
});
//初始4个选项
var num = 4;
//添加选项
function add() {
    // alert(num)
    //添加一行,num加一
    num++;
    //通过知道当前有的按钮数算出选项名
    var str = String.fromCharCode(64 + num);
    //编辑新选项的html代码
    var $li = $("<li>" + "<span>" + str + ":</span> " + " <input type=\"checkbox\"/>" + "  <input type=\"text\"  class=\"str\"/>" + "  <input type=\"button\"   class=\"del\" value=\"删除\"/></li>");
    //将新的一行添加到<ul>中
    var $parent = $("ul");
    $parent.append($li);
    //因为添加了新的选项需要重新绑定按钮
    init();
}
function query() {
    // alert(num)
    var str = "";
    var str1 = "";
    //for循环查询已有控件的输入值
    for (var i = 0; i < num; i++) {
        var a = $("ul li:eq(" + i + ") :text").val();
        var b = $("ul li:eq(" + i + ") :checkbox").is(':checked');
        var j = i + 1;
        str += "第" + j + "个文本框输入：" + a;
        str1 += "第" + j + "个复选框选中：" + b;
    }
    alert(str);
    alert(str1);
}
//绑定每个ul li下的删除按钮
function init() {
    //这里其实用ul li input :button就可以，但是给按钮加一个class方便用css给按钮添加样式，这里本人比较懒没有添加样式。
    $("ul li input.del").unbind("click").click(function() {
        //$(this).parent().remove();链式操作，$(this)为该按钮本事,parent()为其父元素即<li>，调用renmove()将整个<li>节点删除
        $(this).parent().remove();
        //alert(num)
        //for循环刷新列表，因为考试往往用ABC，所以利用ascii码通过获取当前控件的索引来转换成对应的英文字母,
        for (var i = 0; i < num - 1; i++) {
            //ascii码65对应的A,65加上当前索引值再转成字符即可
            var str = String.fromCharCode(65 + i) + ":";
            //定位到每个<li>下的<span>节点，将选项号刷新到页面
            $("ul li:eq(" + i + ") span").html(str);
        }
        //删除一行，num减一
        num--;
    });
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

JQuery动态添加控件并取值



代码描述：新做在线考试项目，添加试题时需要动态的添加控件来设置试题内容，之前只是简单的接触些JS于是弄了本jQuery的书，看了两天做了一个例子，模拟编辑一道多选题的设置，刚开始学，不知道自己做的需不需要改进，希望不足的地方大家提出来。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

小天

相关代码

JQuery动态添加控件并取值

最新