JQuery动态添加控件并取值

时间：2021-05-03 23:59:38
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JQuery动态添加控件并取值-jq22.com</title>

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

<style>

</style>

</head>

<body>

<input type="button" onclick="add()" value="增加">

<input type="button" onclick="query()" value="查看">

<ul>

    <li><span>A:</span>

        <input type="checkbox">

        <input type="text">

        <input type="button" class="del" value="删除">

    </li>

    <li><span>B:</span>

        <input type="checkbox">

        <input type="text">

        <input type="button" class="del" value="删除">

    </li>

    <li><span>C:</span>

        <input type="checkbox">

        <input type="text">

        <input type="button" class="del" value="删除">

    </li>

    <li><span>D:</span>

        <input type="checkbox">

        <input type="text">

        <input type="button" class="del" value="删除">

    </li>

</ul><script>

$(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--;

    });

}</script>

</body>

</html>

相关文章