你的位置:首页 > 软件开发 > 网页设计 > 关于列表中checkbox选中,全选/反选设置

关于列表中checkbox选中,全选/反选设置

发布时间:2016-11-16 18:00:08
关于列表中checkbox选中,全选设置 1 <html> 2 <head> 3 <script type="text/javascript"> 4 //点击行时,checkbox处理方法 5 functio ...

关于列表中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> 

原标题:关于列表中checkbox选中,全选/反选设置

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录