標籤：pre var splay element click tab btn 全選
需求：checkbox控制列表資料全選與取消全選擇。
：
1、html
<body > <input type="button" name="inputfile" id="inputfile" value="點擊匯入" onclick="open();"/> <input type="file" id="File1" name="File1" style="display:none;"> <input type="button" name="outbtn" value="匯出"/> <table border="1"> <!-- <tr> <a href="javascript:;" class="a-upload"> </a> </tr>--> <tr> <td><input id="all" type="checkbox" name="yon" onclick="chk()"/></td> <td>ID</td> <td>地區</td> </tr> <c:forEach items="${dislist }" var="dis"> <tr> <td><input id="mychk" type="checkbox" name="mychk"/></td> <td>${dis.id }</td> <td>${dis.name }</td> </tr> </c:forEach> </table> </body>
2、js
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> /* $("#all").click(function(){ alert("11111111"); if(this.checked){ alert("2222"); $("mychk").prop("checked",true); }else{ $("mychk").prop("checked",false); } }); */ function chk(){ var all = document.getElementById("all"); var mychk = document.getElementsByName("mychk"); alert("mychk長度=="+mychk.length); if(all.checked==true){ alert("all.checked==true全選"); if(mychk.length){ for(var i=0;i<mychk.length;i++){ mychk[i].checked = true; } } mychk.chcked=true; }else{ alert("all.checked==false全不選"); if(mychk.length){ for(var i=0;i<mychk.length;i++){ mychk[i].checked = false; } } } } </script>
JS對checkbox全選和取消全選
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
