Use javascript create checkbox dynamically

最新推荐文章于 2025-08-22 16:04:05 发布

Coder_Hunter

最新推荐文章于 2025-08-22 16:04:05 发布

阅读量547

点赞数

CC 4.0 BY-SA版权

分类专栏： js jsp

本文链接：https://blog.youkuaiyun.com/smithdoudou88/article/details/44344053

js 同时被 2 个专栏收录

18 篇文章

订阅专栏

jsp

18 篇文章

订阅专栏

本文介绍如何使用JavaScript动态生成和增加Checkbox元素，适用于不确定初始显示数量的场景，并提供具体实现代码。

在实际使用中，可能在界面第一次展示的时候，不能确定到底要多少个checkbox，这和业务的需求要关系。

有一种方法就是在页面元素加载完成后，依靠js动态产生一定数量的checkbox,并且如果需要增加时，也可以在js中动态增加。

在js中动态生成html元素的方法不仅对check box，对select标签元素也是一样的，大同小异。

代码如下：

jsp中，写一个标签，这是id是要用到的。

<tr>
    <td align="center" colspan="3" id="check_box_group"></td>
</tr>

js中，代码如下，效果就是在jsp上述的td标签下添加若干个<input type="checkbox" name="checkName" value="具体的数字">标签

// 构建checkbox框
function showcheckbox() {
	var box = $("check_box_group");
	var _html = box.innerHTML;
	var type = "checkbox";
	
	for ( var i = 0; i <= 9; i++) {
		_html += "  <input type='" + type + "' name='checkName' value='" + i + "'>" + i ;
	}
	box.innerHTML = _html + "</br>";
}</span>

在此基础上，可以设置按键，继续增加checkbox的数量，方法和上面的方法类似，要注意的是value的值要和上面的接上。

//增加checkbox
function add_check_box() {
	var type = "checkbox";
	
	var box = $("check_box_group");
	var _html = box.innerHTML;
	var cldNum = document.getElementsByName("checkName");
	for ( var i = checkName.length; i <checkName.length + 10; i++) {  //增加10个
		_html += "  <input type='" + type + "' name='checkName' value='" + i + "'>:" + i;
	}
	box.innerHTML = _html + "</br>";
}

选择个别checkbox后，点击确定如果是子window对象，那么需要parent.document.getxxx获取父window中的对象

var Nums="";
var n=0;

Ext.each(Ext.query("[name='checkName']"),function(item){
		if(item.checked){
			n++;
			Nums = Nums + item.value + ",";
		}
	});
	Nums= Nums.substr(0, cldNums.length - 1);

parent.document.getElementsByName("xxx")[xx].value = cNums; //赋值给父window下的对象parent.win.close();

</pre><pre>

附加：jsNode.cloneNode();//该方法可以复制一个完成的node,如整个tr标签节点。<tr><td></td>...</tr>