js實現複選框的全選 取消全選
阿新 • • 發佈:2018-11-10
html虛擬碼
<table> <tr> <td><input type="checkbox" name="all" id="checkall" onclick="checkAll()" /></td> </tr> </thead> <tbody> <td><input type="checkbox" name="checkname"value="1"/></td> <td><input type="checkbox" name="checkname" value="2"/></td> <td><input type="checkbox" name="checkname" value="3"/></td> <td><input type="checkbox" name="checkname" value="4"/></td> <td><input type="checkbox" name="checkname" value="5"/></td> </tbody> <table>
js部分程式碼
<script> function checkAll() { var father=document.getElementById('checkall'); //獲取到父親複選框(控制全選的id var son=document.getElementsByName('checkname'); //獲取兒子複選框名稱name if(father.checked==true){//因為獲得的是陣列,所以要迴圈 為每一個checked賦值 for(var i=0;i<son.length;i++){ son[i].checked=true; } }else{ for(var j=0;j<son.length;j++){ son[j].checked=false; } } } </script>