關於列表中checkbox選中，全選設置 以上代碼主要處理 1.在列表中如果選中行則選中這行的checkbox，如果再次點擊則取消選中 2.在列表中包含全選checkbox 下麵我自己加入的一段全選和反選的代碼: ...
關於列表中checkbox選中，全選設置
1 <html> 2 <head> 3 <script type="text/javascript"> 4 //點擊行時，checkbox處理方法 5 function doclick(id){ 6 var allche = document.getElementById("allid");//全選checkbox 7 var che = document.getElementsByName("chname");//獲得每行的checkbox 8 var ch = document.getElementById("chid"+id);//選中行的checkbox 9 if(ch.checked==true){//如果該選中行是已經選中的，則設置該checkbox為不選中 10 ch.checked=false; 11 allche.checked=false;//設置全選checkbox為不選中 12 }else{//如果該選中行是未選中的，則設置該checkbox為選中 13 ch.checked="checked"; 14 //判斷是否全部選中，如果已經全部選中，則設置全選checkbox為選中 15 var b = true; 16 for(var i=0;i<che.length;i++){ 17 if(che[i].checked==false){ 18 b = false; 19 break; 20 } 21 } 22 if(b){ 23 allche.checked="checked"; 24 } 25 } 26 } 27 //全選checkbox的處理方法 28 function doallcheck(){ 29 var allche = document.getElementById("allid"); 30 var che = document.getElementsByName("chname"); 31 if(allche.checked == true){ 32 for(var i=0;i<che.length;i++){ 33 che[i].checked="checked"; 34 } 35 }else{ 36 for(var i=0;i<che.length;i++){ 37 che[i].checked=false; 38 } 39 } 40 } 41 //如果單擊每行的checkbox，則把該checkbox的選中狀態反置 42 //該方法主要是為了處理單擊每行的checkbox時，無效果的問題 43 function doclickcheck(obj){ 44 if(obj.checked==true){ 45 obj.checked=false; 46 }else{ 47 obj.checked=true; 48 } 49 } 50 </script> 51 </head> 52 <body> 53 <center><br> 54 <table width="80%" border="0" cellpadding="0" cellspacing="0" style="margin-top: 15"> 55 <tr> 56 <td width="100%" align="center"> 57 <div align="center"> 58 <form name=myform method=post action=""> 59 <table width="100%" id="addtr" border="1" cellpadding="0" cellspacing="0" style="font-size: 5"> 60 <tr> 61 <th width="5%"><span style="background-color: #ff0000;"><input type="checkbox" id="allid" onclick="doallcheck()" title="全選"></</span>th> 62 <th width="30%">費用項目</th> 63 <th width="10%">票據張數</th> 64 <th width="10%">金額</th> 65 <th width="25%">幣種</th> 66 <th width="20%">備註</th> 67 </tr> 68 <% 69 if(list.size()>0){ 70 for(int i=0;i<list.size();i++){ 71 CashModel cm = (CashModel)list.get(i); 72 %> 73 <tr onMouseOver="this.className='listContentTrOver'" onmouseout="this.className='listContentTrOut'" 74 style="cursor: pointer;" onclick="doclick('<%=cm.getId() %>')"> 75 <td align="center"> 76 <span style="background-color: #ff0000;"><input type="checkbox" id="chid<%=cm.getId() %>" name="chname" value="<%=cm.getId() %>" 77 onclick="doclickcheck(this)"></span> 78 </td> 79 <td align="left"><%=cm.getMoneyitem() %></td> 80 <td align="left"><%=cm.getNotenum() %></td> 81 <td align="left"><%=cm.getMoney() %></td> 82 <td align="left"><%=cm.getMoneytype() %></td> 83 <td align="left"><%=cm.getRemark() %></td> 84 </tr> 85 <% 86 } 87 } 88 %> 89 90 </table> 91 </form> 92 </div> 93 </td> 94 </tr> 95 </table> 96 </center> 97 </body> 98 </html>
以上代碼主要處理
1.在列表中如果選中行則選中這行的checkbox，如果再次點擊則取消選中
2.在列表中包含全選checkbox
下麵我自己加入的一段全選和反選的代碼:
1 ... 2 <input id="allid" type="checkbox" onclick="selectAll()"/> 3 4 <s:iterator value="page.records"> 5 <td style="CURSOR: hand; HEIGHT: 30px" align="center" width="2%"> 6 <input class="select" type="checkbox" name="selectList" value="${id}"/> 7 </td> 8 ... 9 10 11 function selectAll() { 12 var allche = document.getElementById("allid"); 13 var che = document.getElementsByName("selectList"); 14 if(allche.checked == true){ 15 for(var i=0;i<che.length;i++){ 16 if(che[i].checked==true){ 17 che[i].checked=false; 18 } 19 else{ 20 che[i].checked="checked"; 21 } 22 } 23 }else{ 24 for(var i=0;i<che.length;i++){ 25 if(che[i].checked==true){ 26 che[i].checked=false; 27 } 28 else 29 { 30 che[i].checked="checked"; 31 } 32 33 } 34 } 35 }
