最近在开发项目的时候,要求实现对地市的权限选择,使用checkbox进行实现。
于是在网上先找了一下关于Struts对于html:checkbox进行的各种控制,可是很失望,网上说的无非都是
使用各种隐藏域来进行赋值或者控制的,而且在使用js对checkbox的状态判断的时候,采用的方法都很麻烦,这里就不一一列举了。
进入正题;
开始的时候发现html:checkbox下没有checked属性,当然对于它的name和id属性还是由于已经发生实质意义上的转变而不能采用getElementById来进行获取。所以一度陷入低谷。
在网上找来找去也没找到满意答案。于是还是自己动手亲自来操作。
静下来仔细一想,发现其实不管jsp页面是由Struts标签来写还是有JSTL来写,最后都是先要生成一个html页面。所以这样就好办了,因为我们的
“全选” 和 “全不选” 都是在html页面生成之后才进行控制的,所以这个时候只要关心已生成的HTML页面中存在的标签并对其进行控制即可。
所以可以用下面的方法进行html:checkbox或者html:multibox的全选控制:
-----------------------------------------------
jsp部分代码:
<input type="checkbox" name="checkall" onclick="checkAll();" value="checkall">全选<br>
<logic:iterate id="city" name="citylist">
<html:multibox property="Area" ><bean:write
name="city" property="cityID"/></html:multibox><bean:write
name="city" property="cityName"/>
</logic:iterate>
-----------------------------------------------
其中
citylist从action中获取:
对应action代码:
List<City> citylist = 从数据获取所有的城市并封装成一个list。
request.setAttribute ("citylist ",citylist );
-----------------------------------------------
对应City类应该包含:
private String cityName;
private String cityID;
已经对应的get、set方法。
-----------------------------------------------
JS
function checkAll(){
//全选
var flag;
var area = document.getElementsByName("Area");
var len = area.length;
var chall = document.getElementsByName("checkall")[0];
if(chall.checked == true){
for(i=0;i<len;i++){
area[i].checked = "checked";
}
}
if(chall.checked != true){
for(i=0;i<len;i++){
area[i].checked = "";
}
}
}
因为这个时候已经存在一个完整的html页面,而
<html:multibox property="Area" ><bean:write name="city" property="cityID"/></html:multibox>
生成的代码为:
<input type="checkbox" name="Area" value="ln" checked="checked">辽宁
<input type="checkbox" name="Area" value="ln/sy" checked="checked">沈阳
<input type="checkbox" name="Area" value="ln/dl" checked="checked">大连
………………
所以可以使用
var area = document.getElementsByName("Area");
来获取到checkbox的对象组,
然后采用循环进行check的设置。
注意的是 document.getElementsByName("Area"); 如果获取的是checkbox,此时返回的是一个object【】;
所以在取 全选 checkbox的checked的值的时候应该使用:
var chall = document.getElementsByName("checkall")[0];
才能获取到全选checkbox对象,然后再通过 chall 。checked 来判断是否 要进行 全选或者 全不选。
当然通过上面的获取对象方法则可以进行对checkbox的其他操作。
希望这些能够对大家有所帮助!
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛