首页 > > 网页制作 > css >

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

2018-06-24 00:39:31来源：未知阅读 ()

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