單選，全選操作js相關技術
阿新 • • 發佈：2017-07-21
刷新 checkbox dal 重新 所有 split ise pan ppc
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相關技術