核心提示：当点击全选按钮时，所有复选框都被选中，若有一个复选框没有被选中，则取消全选复选框的选中状态。1、一个订单表格的HTML代码!DOCTYPE htmlhtmlheadmeta charset=UTF-8...
当点击全选按钮时，所有复选框都被选中，若有一个复选框没有被选中，则取消全选复选框的选中状态。
1、一个订单表格的HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/order.css" />
<script type="text/javascript" src="js/order.js" ></script>
</head>
<body>
<table>
<tr>
<th><input type="checkbox" id="all" onclick="allSelect(this)"/>全选</th>
<th>商品名称</th>
<th>数量</th>
<th>价格</th>
<th>操作</th>
</tr>
<tr>
<th><input type="checkbox" name="cbo" onclick="Select()"/></th>
<td>哇哈哈矿泉水</td>
<td>10</td>
<td>2</td>
<td><input type="button" value="删除" />
<input type="button" value="修改" /></td>
</tr>
<tr>
<th><input type="checkbox" name="cbo" onclick="Select()" /></th>
<td>农夫山泉矿泉水</td>
<td>10</td>
<td>2</td>
<td><input type="button" value="删除" />
<input type="button" value="修改" /></td>
</tr>
<tr>
<th><input type="checkbox" name="cbo" onclick="Select()" /></th>
<td>冰露矿泉水</td>
<td>10</td>
<td>2</td>
<td><input type="button" value="删除" />
<input type="button" value="修改" /></td>
</tr>
</table>
</body>
</html>
2、css样式代码
table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
width: 400px;
margin: 0 auto;
}
td,
th {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
3、最重要的js代码
function allSelect(ch) {
var item = document.getElementsByTagName("input"); //取所有的input标签
for(var i = 0; i < item.length; i++) { //循环每一个
if(item[i].type == "checkbox") { //判断是否是复选框
item[i].checked = ch.checked; //复选框的选中与全选的复选框的选中相同
}
}
}
function Select() {
var item = document.getElementsByName("cbo"); //把除全选以外的其他复选框取出来
var all = document.getElementById("all"); //全选复选框
var tag = true; //标记
//循环每一个复选框，除全选
for(var i = 0; i < item.length; i++) {
if(item[i].checked == false) { // 判断是否选中
tag = false;
break;
}
}
all.checked = tag; //设置全选框是否选中
}
