首页 > 代码库 > 关于列表中checkbox选中，全选/反选设置
关于列表中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 onm ouseOver="this.className=‘listContentTrOver‘" onm ouseout="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=http://www.mamicode.com/"<%=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=http://www.mamicode.com/"page.records"> 5 <td style="CURSOR: hand; HEIGHT: 30px" align="center" width="2%"> 6 <input class="select" type="checkbox" name="selectList" value=http://www.mamicode.com/"${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 }
关于列表中checkbox选中，全选/反选设置
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。