Use javascript create checkbox dynamically

来源：互联网发布：算法爱好者编辑：程序博客网时间：2024/06/05 14:45

在实际使用中，可能在界面第一次展示的时候，不能确定到底要多少个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的值要和上面的接上。

//增加checkboxfunction 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>

0 0