前端案例-全选全不选与反选

全选与全不选

思路分析

1. 绑定事件：绑定复选框的点击事件，编写函数
2. 判断复选框的状态：复选框是否被选中
3. 如果复选框状态被选中，则下面的所有复选框被选中
4. 如果复选框状态未被选中，则下面的所有复选框不选中

实现步骤

1. 获取头部复选框对象，绑定点击事件，编写函数
2. 获取头部复选框的选中状态
3. 获取下面的所有复选框
4. 遍历下面的所有复选框
5. 根据头部复选框的状态，设置遍历得到的每一个复选框的状态为选中/不选中

反选

思路分析

1. 绑定事件：反选按钮绑定点击事件
2. 获取复选框：获取下面所有的复选框
3. 遍历复选框：判断每一个复选框的状态
4. 如果本身选中，则取消选中；如果本身未选中，则选中

实现步骤

1. 绑定反选按钮的点击事件编写函数
2. 获取下面的所有复选框
3. 遍历下面所有的复选框
4. 根据遍历得到的每一个复选框的状态，如果选中，则取消选中，如果未选择，则选中

JS版本

<script type="text/javascript">
		// 全选与全不选
		    // 1.获取头部复选框对象，绑定点击事件，编写函数
		document.getElementById("all").onclick = function() {
			// 2.获取头部复选框的选中状态
			var flag = document.getElementById("all").checked;
			// 3.获取下面的所有复选框
			var cks = document.getElementsByName("ck");
			// 4.遍历下面的所有复选框
			for (var i = 0; i < cks.length; i++) {
				// 判断头部复选框的状态
				if (flag) {// 全选
					cks[i].checked = true;
				} else {// 全不选
					cks[i].checked = false;
				}
			}
		}
		
		// 反选
		    // 1.绑定反选按钮的点击事件编写函数
		function CheckNot() {
			// 2.获取下面的所有复选框
			var cks = document.getElementsByName("ck")
			// 3.遍历下面所有的复选框
			for (var i = 0; i < cks.length; i++) {
			// 4.根据遍历得到的每一个复选框的状态，如果选中，则取消选中，如果未选择，则选中
				if (cks[i].checked) {
					cks[i].checked = false;
				} else {
					cks[i].checked = true;
				}
			}
		}
</script>

jQuery版本

<script type="text/javascript">
		// 全选与全不选
			$("#all").click(function(){
				// 选择所有name属性为ck的复选框
				// 获取头部复选框的状态
				// 设置下面的复选框状态与头部复选框的状态一致  prop()
				$(":checkbox[name = 'ck']").prop("checked",$("#all").prop("checked"));
			})
		// 反选
			// 给反选按钮绑定点击事件
			function CheckNot() {
				// 获取下面所有复选框，设置每个复选框的反状态(选中改为不选中，不选中改为选中)
				$(":checkbox[name = 'ck']").each(function(){
					$(this).prop("checked",!$(this).prop("checked"));
				});
			}
</script>

注意事项

1. 注意HTML结构：在实现全选、全不选和反选时，需要注意HTML结构。通常使用checkbox作为选择器，需要将所有的checkbox放在同一个父元素下，方便操作。

2. 绑定事件：需要为全选、全不选和反选按钮绑定事件，通常使用click事件。在事件处理函数中，可以通过遍历所有的checkbox来实现相应的功能。

3. 适配不同情况：在实现全选、全不选和反选时，需要考虑不同情况下的需求。例如，当部分checkbox被选中时，全选按钮应该变为半选状态；当所有checkbox都被选中时，全选按钮应该变为选中状态。

运用知识

• DOM操作、数组操作、条件判断、事件处理等。

应用场景

1. 在购物车中，用户需要选择多个商品进行结算，可以使用全选、全不选和反选功能。

2. 在管理系统中，用户需要对多个数据项进行批量操作，可以使用全选、全不选和反选功能。

3. 在电子邮件或消息管理中，用户需要对多个邮件或消息进行批量操作，可以使用全选、全不选和反选功能。

案例优化方案

1. 优化HTML结构：将所有的多选框或复选框放在同一个父元素下，方便操作。

2. 避免重复查询DOM：使用变量来存储多选框或复选框的状态，避免重复查询DOM。

3. 使用事件委托：使用事件委托来监听全选、全不选和反选按钮的点击事件，避免给每个按钮都绑定事件。

4. 使用节流函数：在处理多选框或复选框状态变化时，可以使用节流函数来减少DOM操作的频率，提高性能。

5. 优化全选状态：当所有多选框或复选框都被选中时，应该将全选按钮的状态设置为选中状态；当所有多选框或复选框都未被选中时，应该将全选按钮的状态设置为未选中状态。

6. 优化反选功能：在实现反选功能时，可以将当前选中的多选框或复选框的状态取反，避免对所有多选框或复选框都进行操作