jq全选框全选实例

最新推荐文章于 2021-05-22 15:53:34 发布

心丿涅

最新推荐文章于 2021-05-22 15:53:34 发布

阅读量236

点赞数

分类专栏：前端文章标签： Jquery全选框实例

本文链接：https://blog.csdn.net/qq_38096598/article/details/101310313

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>jquery全选实例</title> <style> table th,table td { min-width: 50px; text-align: cent...

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery全选实例</title>
		<style>
			table th,table td {
				min-width: 50px;
				text-align: center;
				padding: 10px 20px;
			}
		</style>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="0">
			<tr>
				<th>
					<input type="checkbox" id="allcheck">
				</th>
				<th>1</th>
				<th>2</th>
				<th>3</th>
			</tr>
			<tr>
				<td><input type="checkbox" name="checkbox" class="checkbox"></td>
				<td>aa</td>
				<td>bb</td>
				<td>cc</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="checkbox" class="checkbox"></td>
				<td>aa1</td>
				<td>bb2</td>
				<td>cc3</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="checkbox" class="checkbox"></td>
				<td>aa1</td>
				<td>bb2</td>
				<td>cc3</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="checkbox" class="checkbox"></td>
				<td>aa1</td>
				<td>bb2</td>
				<td>cc3</td>
			</tr>
		</table>
		<script type="text/javascript">
			$(function() {
				//全选复选框处理
				$("#allcheck").click(function() {
					$(".checkbox").prop('checked', $("#allcheck").prop("checked"));
				});

				//单选复选框处理
				$(".checkbox").click(function() {
					if ($(".checkbox:checked").length == $(".checkbox").length) {
						$("#allcheck").prop("checked", "checked");
					} else {
						$("#allcheck").prop("checked", "");
					}
				})
			})
		</script>
	</body>
</html>

心丿涅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq全选框全选实例

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>jquery全选实例</title> <style> table th,table td { min-width: 50px; text-align: cent...
复制链接

扫一扫