前端简单入门第十九讲使用jQuery完成复选框的全选和全不选

最新推荐文章于 2024-08-07 18:43:26 发布

李阿昀

最新推荐文章于 2024-08-07 18:43:26 发布

阅读量7.3k

点赞数 4

分类专栏： ▬▬▬【一天快速搞定jQuery】前端简单入门文章标签： jquery

本文链接：https://blog.csdn.net/yerenyuan_pku/article/details/71595825

版权

前端简单入门同时被 2 个专栏收录

25 篇文章 5 订阅

订阅专栏

▬▬▬【一天快速搞定jQuery】

5 篇文章 3 订阅

订阅专栏

还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗？如果读者初次翻阅本文，可记得看看前端简单入门第十三讲使用JavaScript完成复选框的全选和全不选的效果！现在我就来使用jQuery完成对复选框的全选和全不选效果，显示效果为：
这里写图片描述
要完成这个效果，必然要了解jQuery中对属性操作的方法：
在这里插入图片描述
下面按照如下步骤来使用jQuery完成对复选框的全选和全不选效果：

在页面中添加复选框；
引入jQuery的js文件；
编写jQuery的入口函数；
点击上面的复选框，获得下面所有的复选框；
修改下面所有的复选框的值。

我摘出最重要的一个html文件——【data.html】：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/style.css" />
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
		<script>
			// 表格的隔行换色
			$(function() {
				$("tbody tr:odd").addClass("odd");
				$("tbody tr:even").addClass("even");
			});
		</script>
	</head>
	<body>
		<table id="tab1" border="1" width="80%" align="center">
			<thead>
				<tr>
					<th><input type="checkbox" id="selectAll" /></th>
					<th>分类的ID</th>
					<th>分类的名称</th>
					<th>分类的描述</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox" name="ids" /></td>
					<td>1</td>
					<td>手机数码</td>
					<td>手机数码</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="ids" /></td>
					<td>2</td>
					<td>电脑办公</td>
					<td>电脑办公</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="ids" /></td>
					<td>3</td>
					<td>烟酒糖茶</td>
					<td>烟酒糖茶</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="ids" /></td>
					<td>4</td>
					<td>鞋靴箱包</td>
					<td>鞋靴箱包</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="ids" /></td>
					<td>5</td>
					<td>汽车用品</td>
					<td>汽车用品</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

接着编写jQuery代码来完成对复选框的全选和全不选效果：

<script>	
	// 复选框的全选和全不选
	$(function() {
		// 获得上面的复选框
		var $selectAll = $("#selectAll");
		// alert($selectAll.prop("checked")); // 返回undefined未定义
		$selectAll.click(function() {
			// alert($selectAll.prop("checked"));
			if ($selectAll.prop("checked") == true) {
				// 上面的复选框已被选中
				$(":checkbox[name='ids']").prop("checked", true);
			} else {
				// 上面的复选框没被选中
				$(":checkbox[name='ids']").prop("checked", false);
			}
		});
	});
</script>

细心的读者应该能看出以上代码能简化为：

<script>	
	// 复选框的全选和全不选
	$(function() {
		$("#selectAll").click(function() {
			$(":checkbox[name='ids']").prop("checked", this.checked); // this指代的你当前选择的这个元素的JS对象
		});
	});
</script>