Day14-小功能系列:全选效果

最新推荐文章于 2023-10-23 15:44:26 发布

原创最新推荐文章于 2023-10-23 15:44:26 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js小功能

js基础专栏收录该内容

14 篇文章

订阅专栏

Day14-小功能系列:全选效果

全选效果:选中全选复选框，则选中所有的复选框

首先：先写前端界面
创建一个checkbox为全选功能的复选框
在创建多个其他复选框

<body>
	<a><input type="checkbox" name="all" />全选/反选</a><br /><br /><br />
	<input type="checkbox" name="stu" value="1"/>学生1<br />
	<input type="checkbox" name="stu" value="2"/>学生2<br />
	<input type="checkbox" name="stu" value="3"/>学生3<br />
	<input type="checkbox" name="stu" />学生4<br />
	<input type="checkbox" name="stu" />学生5<br />
	<input type="checkbox" name="stu" />学生6<br />
	<input type="checkbox" name="stu" />学生7
</body>

页面效果：

然后给添加js效果
1.导入jQuery文件

<script src="../js/jquery2.1.min.js"></script>

2.获取全选的复选框标签并添加点击事件。
3.获取其他复选框标签并改变其checked属性。

<script type="text/javascript">
	$(function(){
		//获取input标签内name为all的标签，并添加单击事件
		$("input[name='all']").click(function(){
				//声明c来接受当前(被点击)标签的checked属性
				var c = $(this).prop("checked");
				//将获取的checked属性，添加到input中name为stu的标签中。
				$("input[name='stu']").prop("checked",c);
			})
		})
</script>