1、每个子input标签都需要进行判断
2、使用开闭原则，一旦满足条件就改变默认值
3、在给主input标签注册事件时，要求主input标签的checked值赋值给子标签
<!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; ???????} ???????????tbody tr:hover { ???????????????cursor: pointer; ???????????????background-color: #fafafa; ???????????} ???</style></head><body> ???<div class="wrap"> ???????<table> ???????????<thead> ???????????????<tr> ???????????????????<th> ???????????????????????<input type="checkbox" id="theadInp" /> ???????????????????</th> ???????????????????<th>菜名</th> ???????????????????<th>饭店</th> ???????????????</tr> ???????????</thead> ???????????<tbody id="tbody"> ???????????????<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> ???????var inp = document.getElementById("theadInp"); ???????var tbody = document.getElementById("tbody"); ???????var inps = tbody.getElementsByTagName("input"); ???????//给表头的input标签注册事件 ???????inp.onclick = function () { ???????????for (var i = 0; i < inps.length; i++) { ???????????????inps[i].checked = this.checked; ???????????} ???????} ???????//给tbody中的input标签注册事件 ???????for (var i = 0; i < inps.length; i++) { ???????????inps[i].onclick = function () { ???????????????var bool = true; ???????????????for (var i = 0; i < inps.length; i++) { ???????????????????if (inps[i].checked === false) { ???????????????????????bool = false; ???????????????????} ???????????????} ???????????????inp.checked = bool; ???????????} ???????} ???</script></body></html>JS——全选与全不选
原文地址：http://www.cnblogs.com/wuqiuxue/p/7874699.html