本文實例為大家分享了js/jQuery兩種代碼實現全選效果的具體代碼，供大家參考，具體內容如下
注意點
在獲取子選框的時候別加上 全選框的個數了
技巧
找 tbody 下面的input標簽 就可以
jq文件夾自己下載即可
思路
var all=my$("j_tb").getElementsByTagName("input"); // alert(all.length); //實現1 點擊全選 子選框都得被全選 /** * * 點擊全選框 判斷全選框的checked是否為真 為真 遍歷所有子選框 設置所有子選框的checked=true; true不用加"" * * */ my$("j_cbAll").onclick=function(){ if(j_cbAll.checked) { for(var i=0;i<all.length;i++) { all[i].checked=true; } } else{ for(var i=0;i<all.length;i++) { all[i].checked=false; } } } //實現2 選擇所有的子選框 全選框勾選 var arr=[]; for(var i=0;i<all.length;i++) { all[i].onclick=function(){ //思路過程 /** * 創建數組 * 點擊每個子選框 * 1.數組清零 * 2.fou循環所有自選框 判斷是否被選中(all[i].checked) 選中的元素加入新的數組(arr.push(all[i]))里面 * 3.判斷新的數組長度是否等于子選框數組長度 是的話 全選框被選中（my$("j_cbAll").checked=true） 否則相反 */ arr=[]; for(var i=0;i<all.length;i++) if(all[i].checked) { arr.push(all[i]); } console.log(arr.length); if(arr.length==all.length){ my$("j_cbAll").checked=true; } else{ my$("j_cbAll").checked=false; } } } </script><!-- <script src="jquery-1.12.4.js"></script><script> $(function () { $("#j_cbAll").click(function () { //修改下面的哪些checkbox $("#j_tb input").prop("checked", $(this).prop("checked"));//根據自己來判斷是否全選與否 }); $("#j_tb input").click(function () { if($("#j_tb input:checked").length == $("#j_tb input").length){ $("#j_cbAll").prop("checked", true) }else { $("#j_cbAll").prop("checked", false) } }); });</script><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微軟雅黑"; color: #fff; } td { font: 14px "微軟雅黑"; } tbody tr { background-color: #f0f0f0; text-align: center; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style></head><body><div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll"/> </th> <th>菜名</th> <th>飯店</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox"/> </td> <td>紅燒肉</td> <td>田老師</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>西紅柿雞蛋</td> <td>田老師</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>紅燒獅子頭</td> <td>田老師</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>日式肥牛</td> <td>田老師</td> </tr> </tbody> </table></div><script type="text/javascript"> function my$(id) { return document.getElementById(id); } var all=my$("j_tb").getElementsByTagName("input"); // alert(all.length); //實現1 點擊全選 子選框都得被全選 /** * * 點擊全選框 判斷全選框的checked是否為真 為真 遍歷所有子選框 設置所有子選框的checked=true; true不用加"" * * */ my$("j_cbAll").onclick=function(){ if(j_cbAll.checked) { for(var i=0;i<all.length;i++) { all[i].checked=true; } } else{ for(var i=0;i<all.length;i++) { all[i].checked=false; } } } //實現2 選擇所有的子選框 全選框勾選 var arr=[]; for(var i=0;i<all.length;i++) { all[i].onclick=function(){ //思路過程 /** * 創建數組 * 點擊每個子選框 * 1.數組清零 * 2.fou循環所有自選框 判斷是否被選中(all[i].checked) 選中的元素加入新的數組(arr.push(all[i]))里面 * 3.判斷新的數組長度是否等于子選框數組長度 是的話 全選框被選中（my$("j_cbAll").checked=true） 否則相反 */ arr=[]; for(var i=0;i<all.length;i++) if(all[i].checked) { arr.push(all[i]); } console.log(arr.length); if(arr.length==all.length){ my$("j_cbAll").checked=true; } else{ my$("j_cbAll").checked=false; } } } </script><!-- <script src="jquery-1.12.4.js"></script><script> $(function () { $("#j_cbAll").click(function () { //修改下面的哪些checkbox $("#j_tb input").prop("checked", $(this).prop("checked"));//根據自己來判斷是否全選與否 }); $("#j_tb input").click(function () { if($("#j_tb input:checked").length == $("#j_tb input").length){ $("#j_cbAll").prop("checked", true) }else { $("#j_cbAll").prop("checked", false) } }); });</script> --></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
