checkbox的使用

checkbox的使用  

 

checkbox的使用

1、checkbox定义

[pre]    在jsp或者html页面中，经常会用到checkbox。比如这样定义：[/pre]

1. <input type="checkbox" name="check_id" size="6" value="1" >
2. <input type="checkbox" name="check_id" size="6" value="2" >
3. ...
4. <input type="checkbox" name="check_id" size="6" value="9" >

[pre]提交后的我们可以直接从request对象中取得所有在页面中选择的checkbox列表。
以上面的定义为例，如果在页面中选择了value为1、2、5的checkbox项，则可以
这样获得选择项：[/pre]

1. String[] checkIds = request.getParameterValues("check_id");

[pre]有可能一些初级的web程序员也会这样定义：[/pre]

1. <input type="checkbox" name="check_id1" size="6" value="1" >
2. <input type="checkbox" name="check_id2" size="6" value="2" >
3. ...
4. <input type="checkbox" name="check_id9" size="6" value="9" >

[pre]然后，在后台取数据时这样获得选择项：[/pre]

1. String checkId1 = request.getParameterValues("check_id1");
2. String checkId2 = request.getParameterValues("check_id2");
3. ...
4. String checkId9 = request.getParameterValues("check_id9");

[pre]这样也可以解决问题，但是比较起来，后者用的是死办法，而且维护起来
非常不便，在此不推荐。[/pre]

2、checkbox的校验

[pre]    经常有这样的情况，在页面中，有一批动态的checkbox列表项和
一个提交的按钮，业务逻辑需要至少选择一个列表项数据之后，才可以真正
提交。可以用一个javascript解决：
假设页面定义和相关代码如下：[/pre]

1. <script language=javascript>
2. function okClick(){
3.     //获得选择的check列表对象
4.     var checkIdObj = eval("form1.check_id");
5.     //判断对象是否为空
6.     if (checkIdObj == null) {
7.         return;
8.     }
9.     for (i=0; i<checkIdObj.length; i++) {
10.         if(checkIdObj[i].checked){
11.             form1.submit();
12.             return;
13.         }
14.     }
15. }
16. </script>
17. <form name="form1" method="post" action="..">
18.     <!-- 下面的checkbox列表是动态的，有可能是从数据库中读取出来，所以有可能列表中只有一个数据-->
19.     <input type="checkbox" name="check_id" size="6" value="1" >
20.     <input type="checkbox" name="check_id" size="6" value="2" >
21.     ...
22.     <input type="button" name="ok" onclick="okClick()" value="确定">
23. </form>

[pre]上面的定义中，如果checkbox列表中有多余一个数据时，可以工作正常，但是如果只
有一个的话（因为checkbox列表是动态的），那么永远都不会提交（不信你可以试一试）。
    经过研究，发现原来是html语言的定义有问题。如果checkbox的列表项只有一个
的话，那么checkIdOjb.length是不存在的。
所以，可以将以上的javascript改一下：[/pre]

1. <script language=javascript>
2. function okClick(){
3.     //获得选择的check列表对象
4.     var checkIdObj = eval("form1.check_id");
5.     //判断对象是否为空
6.     if (checkIdObj == null) {
7.         return;
8.     }
9.     //如果check列表对象多于一个
10.     if(checkIdObj.length){
11.         for (i=0; i<checkIdObj.length; i++) {
12.             if(checkIdObj[i].checked){
13.                 form1.submit();
14.                 return;
15.             }
16.         }
17.     }
18.     //否则
19.     else{
20.         if(form1.check_id.checked){
21.             form1.submit();
22.             return;
23.         }
24.     }
25. }
26. </script>