首页 > 代码库 > 单选,全选操作js相关技术

单选,全选操作js相关技术

jsp上编写全选框,单选框

全选框

1 <td class="TableHeaderCell" style="width: 30px;">
2     <input id="checkedAll"  type="checkbox">
3 </td>

单选框

<input id="fappChecked" 
    name="checkedFapp" type="checkbox"
    onclick="javascript:cliAppro.checkedOne(this);"
    forgid="<c:out value=http://www.mamicode.com/‘${row.FORGID}‘/>" 
    forgname="<c:out value=http://www.mamicode.com/‘${row.FORGNAME}‘/>"
    cfrcode="<c:out value=http://www.mamicode.com/‘${row.FRCODE}‘/>"
     value = "<c:out value=http://www.mamicode.com/‘${row.FAPPALLID}‘/>"/>

jsp上还要表写几个隐藏的input框,用于存放选中的数据

1 <input id="FAPPALLIDS" type="hidden" value="" />
2 <input id="UNITS" type="hidden" value=""/>
3 <input id="FORGIDS" type="hidden" value=""/>
4 <input id="CFRCODES" type="hidden" value=""/>

js上首先在加载页面时给这几个隐藏框赋值

 1         /**
 2          * 初始化页面数据(0,打开页面初始化,1,查询、分页数据初始化);
 3          * 为多选框存放数值
 4          * @param {Object} ctype
 5          */
 6         this.iniData = http://www.mamicode.com/function(ctype){
 7                 fappallids = $get(‘FAPPALLIDS‘);
 8                 forgids = $get(‘FORGIDS‘);
 9                 units = $get(‘UNITS‘);
10                 cfrcodes = $get(‘CFRCODES‘);
11                 checkedNumber = $get(‘checkedNumber‘);
12                 checkedFapp = document.getElementsByName("checkedFapp");
13             
14             if(ctype =="0"){
15                 fappallids.valuehttp://www.mamicode.com/= "";
16                 forgids.valuehttp://www.mamicode.com/= "";
17                 units.valuehttp://www.mamicode.com/= "";
18                 cfrcodes.valuehttp://www.mamicode.com/= "";
19                 checkedNumber.innerHTML = 0;
20             }
21         }

js上一个公用的添加、删除选中数据的方法

 1         /**
 2          * 操作拨付数组;添加、删除拨付号
 3          * @param {Object} box_obj
 4          */
 5         this.add_del_Fund = function(box_obj){
 6             //获取id=FAPPALLIDS 的隐藏框的值
 7             var fund = fappallids;
 8             
 9             if(box_obj.checked){//选中 向隐藏值中添加
10                 if(fund.value =http://www.mamicode.com/= ‘‘){//判断id=FAPPALLIDS 的隐藏框的值是否为空,为空就直接赋值,不为空就 +=‘,‘ 加逗号 追加值
11                     fund.value =http://www.mamicode.com/ box_obj.value;
12                     //注意不同的取值方法 .value和getAttribute("");
13                     units.value = http://www.mamicode.com/box_obj.getAttribute(‘forgname‘);
14                     forgids.value = http://www.mamicode.com/box_obj.getAttribute(‘forgid‘);
15                     cfrcodes.value = http://www.mamicode.com/box_obj.getAttribute(‘cfrcode‘);
16                  }else{
17                     fund.value+= ‘,‘+box_obj.value;
18                     units.value +=‘,‘+box_obj.getAttribute(‘forgname‘);
19                     forgids.value +=‘,‘+box_obj.getAttribute(‘forgid‘);
20                     cfrcodes.value +=‘,‘+box_obj.getAttribute(‘cfrcode‘);
21                 }
22             }else{//取消选择从隐藏值中删除
23                 //将字符串按 ‘,‘分割为字符串数组
24                 var funds = (fund.value).split(‘,‘);
25                 var funits = (units.value).split(‘,‘);
26                 var fforgids =(forgids.value).split(‘,‘);
27                 var fcforgids =(cfrcodes.value).split(‘,‘);
28                 //声明数组
29                 var newFunds = [];
30                 var newFunits = [];
31                 var newFforgids = [];
32                 var newFcforgids = [];
33                 for(var n=0,j = 0; j < funds.length; j++){
34                     //判断funds[j]是否和你要取消选中的框里的值相等,
35                     //如果不相等就将这个值赋值到新声明的数组中
36                     //如果相等 就用continue关键字跳过下面赋值的代码,这样就相当于删除了
37                     if(funds[j].indexOf(box_obj.value) == 0){
38                         continue;
39                     }
40                     newFunds[n] = funds[j];
41                     newFunits[n] = funits[j];
42                     newFforgids[n] = fforgids[j];
43                     newFcforgids[n] = fcforgids[j];
44                     //为下一次赋值做准备
45                     n++;
46                 }
47                 //用新声明的数组赋值到fund中
48                 fund.value = http://www.mamicode.com/newFunds.join(‘,‘);
49                 units.value = http://www.mamicode.com/newFunits.join(‘,‘);
50                 forgids.value = http://www.mamicode.com/newFforgids.join(‘,‘);
51                 cfrcodes.value = http://www.mamicode.com/newFcforgids.join(‘,‘);
52             }
53         }

js上单选方法:

 1 /**
 2          * 单选操作
 3          * @param {Object} box_obj
 4          */
 5         this.checkedOne = function(box_obj){
 6             //声明变量obj对应name="cliApplyBFWin"的对选框
 7             var obj = checkedFapp;
 8             var checkedNum = 0;
 9             //每次选中都要计算已选择的框的个数
10             for ( var i = 0; i < obj.length; i++) {
11                 if (obj[i].checked){
12                     checkedNum +=1;
13                 }
14             }
15             //获取id=‘checkedAll‘的全选框对象
16             var checkAll = $get(‘checkedAll‘);
17             //由checkedNum与obj.length相等判断所有的多选框都已经被选中,
18             //这时改变全选框的状态为已选
19             if(checkedNum == obj.length){
20                 checkAll.checked = true;
21             }
22             //由checkedNum小于obj.length判断还有多选框的状态为 未选中
23             //这时 全选框 的状态为 未选中
24             if(checkedNum < obj.length){
25                 checkAll.checked = false;
26             }
27             //获取和删除选中获得的值
28             object.add_del_Fund(box_obj);
29             if((fappallids.value).length < 1){
30                 checkedNumber.innerHTML = 0;
31             }else{
32                 checkedNumber.innerHTML = ((fappallids.value).split(‘,‘)).length;
33             }
34         }

js上全选方法:

 1 /**
 2          * 全选择
 3          * 
 4          */
 5         this.checkedAll = function(checkObj){
 6             //获取全选框的状态
 7             var booleanAll = checkObj.checked;
 8             //获取单选框组对象
 9             var obj = checkedFapp;
10             var i = 0;
11             for (; i < obj.length; i++) {
12                 //判断单选框状态是否和全选框相同,
13                 //相同就跳过继续,不相同就改变单选框状态
14                 if(obj[i].checked == booleanAll)
15                     continue;
16                 obj[i].checked = booleanAll;
17                 //从隐藏框里添加或者取消单选框的值
18                 object.add_del_Fund(obj[i]);
19             }
20     
21             if((fappallids.value).length < 1){
22                 checkedNumber.innerHTML = 0;
23             }else{
24                 checkedNumber.innerHTML = ((fappallids.value).split(‘,‘)).length;
25             }
26         }

java代码中对选中数据进行批量操作

 1 //先判断是否存在
 2             if(ToolUtils.isEmpty(mapParam.get("FAPPALLIDS"))){
 3                 throw new ServiceLocatorException("请选择要撤销的申请单!");
 4             }
 5             //若存在就将值保存到新数值中
 6             String fappallids[] = String.valueOf(mapParam.get("FAPPALLIDS")).split(",");
 7             String forgids[] = String.valueOf(mapParam.get("FORGIDS")).split(",");
 8             String cfrcodes[] = String.valueOf(mapParam.get("CFRCODES")).split(",");
 9             if(fappallids.length != forgids.length){
10                 throw new SaveException("非法操作!请刷新页面,重新操作!");
11             }
12             //从mapParam中删除那些数值
13             mapParam.remove("FAPPALLIDS");
14             mapParam.remove("FORGIDS");
15             mapParam.remove("CFRCODES");
16             int delN = 0;
17             //再将值一个一个的存到map中,进行相关操作
18             for(int i=0; i<fappallids.length; i++){
19                 mapParam.put("FAPPALLID", fappallids[i]);
20                 mapParam.put("FORGID", forgids[i]);
21                 mapParam.put("FRCODE", cfrcodes[i]);
22                 delN += this.delRevocationForFapp(mapParam);
23             }
24             return delN;

 

单选,全选操作js相关技术