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