运用JQuery实现全选，和取消的操作

最新推荐文章于 2024-04-25 11:38:14 发布

aigo-2021

最新推荐文章于 2024-04-25 11:38:14 发布

阅读量770

点赞数 1

分类专栏： javaWeb 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/aigo_2021/article/details/124648963

版权

javaWeb 专栏收录该内容

33 篇文章 4 订阅

订阅专栏

运用JQuery实现全选，反选和取消的操作

代码展示：

<!doctype html>
<html lang="en">
 <head>
  <title>Document</title>
	<script src="jquery-3.2.1.js"></script>
  	<script>
		$(function(){
			$("#selectAll").click(function(){
				$(":checkbox").prop("checked",true);
			});
			$("#notSelect").click(function(){
				$(":checkbox").prop("checked",false);
			});
		});

	</script>
 </head>
 <body>
	<input type="button" id="selectAll" value="全选">
	<input type="button" id="notSelect" value="取消">
	<table border="1">
	<tr align="center">
		<td>#</td>
		<td>姓名</td>
		<td >爱好</td>
	</tr>
	<tr>
		<td><input type="checkbox"></td>
		<td>郭德纲</td>
		<td>开车，京剧</td>
	</tr>
	<tr>
		<td><input type="checkbox"></td>
		<td>岳云鹏</td>
		<td>做饭</td>
	</tr>
	<tr>
		<td><input type="checkbox"></td>
		<td>于谦</td>
		<td>喝酒，抽烟，烫头</td>
	</tr>
	</table>
 </body>
</html>

运行效果：