单选，全选操作js相关技术
Posted liujiee2
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了单选，全选操作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=‘${row.FORGID}‘/>" forgname="<c:out value=‘${row.FORGNAME}‘/>" cfrcode="<c:out value=‘${row.FRCODE}‘/>" value = "<c:out value=‘${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 = 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.value = ""; 16 forgids.value = ""; 17 units.value = ""; 18 cfrcodes.value = ""; 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 == ‘‘){//判断id=FAPPALLIDS 的隐藏框的值是否为空，为空就直接赋值，不为空就 +=‘,‘ 加逗号 追加值 11 fund.value = box_obj.value; 12 //注意不同的取值方法 .value和getAttribute(""); 13 units.value = box_obj.getAttribute(‘forgname‘); 14 forgids.value = box_obj.getAttribute(‘forgid‘); 15 cfrcodes.value = 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 = newFunds.join(‘,‘); 49 units.value = newFunits.join(‘,‘); 50 forgids.value = newFforgids.join(‘,‘); 51 cfrcodes.value = 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相关技术的主要内容，如果未能解决你的问题，请参考以下文章
2017 年 9 月 27 日 js(1.两个select 内容互换 2.单选按钮 同意可点击下一步 3. 全选框)