<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript">
<!--全选框的方法-->
function check(object){
var checks=document.getElementsByName("checks");
if (checks!=null)
{
for (var i=0;i<checks.length;i++ )
{
checks[i].checked=document.getElementById("checkAll").checked;
}
}
};
<!--这里要注意如果 var checkall=document.getElementById("checkAll").checked; 下面判断 checkall==true 语句是错的！逻辑是对的，语法是错的-->
<!--如果子选框全部选中，则让全选框选中，如果子选框中有至少一个没有选中则选框不选-->
function checks(){
var checkall=document.getElementById("checkAll");
var checks=document.getElementsByName("checks");
var count=0;
var sum=0;
for (var i=0;i<checks.length ;i++ )
{
if (checks[i].checked==true)
{
count=count+1;
}
if(checks[i].checked==false){
sum=sum+1;
}
}
alert(sum);
if (count==checks.length)
{
checkall.checked=true;
}
if (sum>0)
{
if (checkall.checked==true)
{
checkall.checked=false;
}
}
}
</script>
</head>
<body>
<div id="" class="">
<table>
<tr>
<td><input type="checkbox" id="checkAll" onclick="check(this)"></td>
<td>商品名称</td>
<td>商品价格</td>
<td>商品描述</td>
</tr>
<tr>
<td><input type="checkbox" name="checks" onclick="checks()"></td>
<td>酒精</td>
<td>12</td>
<td>酒精你懂的</td>
</tr>
<tr>
<td><input type="checkbox" name="checks" onclick="checks()"></td>
<td>饭盒</td>
<td>15</td>
<td>吃饭的工具，你不知道？</td>
</tr>
<tr>
<td><input type="checkbox" name="checks" onclick="checks()"></td>
<td>酒精</td>
<td>12</td>
<td>酒精你懂的</td>
</tr>
<tr>
<td><input type="checkbox" name="checks" onclick="checks()"></td>
<td>饭盒</td>
<td>15</td>
<td>吃饭的工具，你不知道？</td>
</tr>
<tr>
<td><input type="checkbox" name="checks" onclick="checks()"></td>
<td>酒精</td>
<td>12</td>
<td>酒精你懂的</td>
</tr>
<tr>
<td><input type="checkbox" name="checks" onclick="checks()"></td>
<td>饭盒</td>
<td>15</td>
<td>吃饭的工具，你不知道？</td>
</tr>
</table>
</div>
</body>
</html>
运行效果图 (第一个是全选框，下面是子选框)
