在代码中注释很清楚，思路很清晰，写了js和jquery两种写法。喜欢用谁就用谁！
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单的全选反选demo</title> <style> * { padding:0; margin:0; } .wrap { width:300px; margin:20px 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; } 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" name="choose"/> </td> <td>红烧肉</td> <td>家里蹲</td> </tr> <tr> <td> <input type="checkbox" name="choose"/> </td> <td>西红柿鸡蛋</td> <td>家里蹲</td> </tr> <tr> <td> <input type="checkbox" name="choose"/> </td> <td>红烧狮子头</td> <td>家里蹲</td> </tr> <tr> <td> <input type="checkbox" name="choose"/> </td> <td>日式肥牛</td> <td>家里蹲</td> </tr> </tbody> </table> </div> <script> var all = document.getElementById("j_cbAll"); var tbody = document.getElementById("j_tb"); var checkboxs = tbody.getElementsByTagName("input"); //给全选反选checkbox绑定点击事件 all.onclick = function() { //当点击1的时候循环遍历除过1之外的所有checkbox，并讲这些checkbox的状态设置的和1一样 for (var i = 0; i < checkboxs.length; i++) { //当前遍历到了的checkbox var checkbox = checkboxs[i]; //this.checked表示1的选中状态，this指的是1 //所以这句是将1的状态设置为当前遍历到的checkbox checkbox.checked = this.checked; } }; //循环给所有除过1的checkbox绑定click事件 for (var i = 0; i < checkboxs.length; i++) { checkboxs[i].onclick = function() { //作为一个标记表示1应该选中还是不选中 var isCheckedAll = true; //循环遍历除1以外的所有checkbox for (var i = 0; i < checkboxs.length; i++) { //只要有一个是未选中的，那么1就应该是未选中的，将isCheckedAll设置为false,循环就可以结束了 if (!checkboxs[i].checked) { isCheckedAll = false; break; } } //将1的状态更新为isCheckedAll all.checked = isCheckedAll; }; } </script> <!--下面代码是Jquery代码实现方法。思路一样--> <script src="../js/jquery.js"></script> <script> var checkboxs = $("input[name='choose']"); $("#j_cbAll").click(function () { //此时的this才指的是id=j_cbAll的checkbox，因为进入$.each后作用域就自动切换成checkboxs中的内容，所以要吧当前的this保存起来待会在$.each中用 var thisAll = this; //$.each中的function的作用域是checkboxs数组中的内容 $.each(checkboxs, function (i, item) { //item.checked = this.checked; //此时this指的是遍历到的元素，thisAll就是我们保存的id=j_cbAll的checkbox this.checked = thisAll.checked; }); }); $("input[name='choose']").on("click", function () { var isCheckedAll = true; $.each(checkboxs, function (i, item) { if(!this.checked){ isCheckedAll = false; return false; } }) $("#j_cbAll").prop("checked",isCheckedAll); }) </script> </body> </html>
原地址：http://www.17sucai.com/pins/demoshow/24737