复选框的全选和反选

最新推荐文章于 2020-07-08 13:27:25 发布

flyflyfly88

最新推荐文章于 2020-07-08 13:27:25 发布

阅读量369

点赞数 1

文章标签： html js

本文链接：https://blog.csdn.net/flyflyfly88/article/details/77012092

版权

当点击全选按钮时，所有复选框都被选中，

若有一个复选框没有被选中，则取消全选复选框的选中状态

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" οnclick="allSelect(this)"/>全选</th>
				<th>商品名称</th>
				<th>数量</th>
				<th>价格</th>
				<th>操作</th>
			</tr>
			<tr>
				<th><input type="checkbox" name="cbo" οnclick="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" οnclick="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" οnclick="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; //设置全选框是否选中
}