你的位置:首页 > 网页设计

[网页设计]关于列表中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           else29           {30             che[i].checked="checked";31           }32           33         } 34       } 35     }