详细步骤jq实现简单的全选按钮

最新推荐文章于 2022-03-23 15:30:21 发布

温L

最新推荐文章于 2022-03-23 15:30:21 发布

阅读量1k

点赞数 1

文章标签： javascript 前端 jquery ecmascript html

本文链接：https://blog.csdn.net/lwf0829/article/details/121252777

版权

该博客介绍了如何使用jQuery实现全选和反选的功能。通过监听全选按钮状态和子选项变化，动态更新全选按钮的选中状态。文章提供了详细的步骤和代码示例。

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

//整体思路:
//1当按全选时，子按钮全选。当取消全选，子按钮就不选中
//2当子选项发生改变时，如果选中长度等于子按钮总数全选按钮就选中，否则反之

整体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选</title>
        //jquery的js引过来
		<script src="../js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        //内容
		<label><input type="checkbox" id="all"/>全选</label>
		<p>
			<label><input type="checkbox" class="item"/>选项1</label>
			<label><input type="checkbox" class="item"/>选项2</label>
			<label><input type="checkbox" class="item"/>选项3</label>
			<label><input type="checkbox" class="item"/>选