您的位置：首页 > Web前端 > JQuery

JQuery动态添加控件并取值

2016-07-08 10:24 274 查看

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="UTF-8">
</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 type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(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>

需要注意的是

$("ul li input.del").unbind("click").click(function()<span style="font-family: 宋体; font-size: 9pt; background-color: rgb(255, 255, 255);"> 这里加了一个unbind，是因为remove把节点删除但是该节点的引用还可以用，所有我点击一次删除按钮，以后再点删除按钮，按钮都是指向之前删除的那一项，所以加了unbind解除绑定可以解决这个问题。</span>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 控件动态添加

相关文章推荐

新的分享

章节导航