复选框全选与取消全选

最新推荐文章于 2019-08-12 21:56:39 发布

TWlihuan

最新推荐文章于 2019-08-12 21:56:39 发布

阅读量345

点赞数 1

文章标签： js html

本文链接：https://blog.csdn.net/TWlihuan/article/details/79180039

版权

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框全选与取消全选</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	var isCheckAll = false;//定义变量标记是否已被全选,默认值false
	function checkAll() {
		if (isCheckAll) {
			$("input[type='checkbox']").each(function() {
				this.checked = false;
			});
			isCheckAll = false;
		} else {
			$("input[type='checkbox']").each(function() {
				this.checked = true;
			});
			isCheckAll = true;
		}
	}
</script>
</head>
<body>
	<table>
		<thead>
			<tr>
				<th><input type="checkbox" οnclick="checkAll();" /></th>
				<th>thead1</th>
				<th>thead2</th>
				<th>thead3</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input value="" type="checkbox" /></td>
				<td>content</td>
				<td>content</td>
				<td>content</td>
			</tr>
			<tr>
				<td><input value="" type="checkbox" /></td>
				<td>content</td>
				<td>content</td>
				<td>content</td>
			</tr>
			<tr>
				<td><input value="" type="checkbox" /></td>
				<td>content</td>
				<td>content</td>
				<td>content</td>
			</tr>
		</tbody>
	</table>
</body>
</html>