JS实现购物车的全选和取消全选效果---使用checkbox复选框

JS实现购物车全选和取消效果—使用checkbox复选框

一、需求说明

---

1、全选按钮需求

​        选中全选按钮，下面的所有按钮都会被选中；

​        取消选中全选按钮，下面的所有按钮也会被取消选中。

2、除全选按钮之外的其他按钮需求

​        其他按钮全部被选中，全选按钮也跟着被选中；

​        其他按钮只要有一个没有被选中，全选按钮也不会被选中。

二、功能演示

---

三、核心代码

---

<script>
	// 1、获取我们所需的标签对象
	// 获取表示全选的input标签
	var inputAll = document.querySelector('[name="all"]');
	//获取其他所有的input标签，存储在一个伪数组中
	var inputOther = document.querySelectorAll('[name="other"]');

	// 2、给表示全选的input标签添加点击事件
	inputAll.addEventListener('click', function () {
		// 循环遍历伪数组中存储的其他的所有input标签对象
		inputOther.forEach(function (item) {
			// item中存储的是伪数组中的每一个 name="other" 的input标签
			// 将全选input标签的checked属性值赋值给其他的input标签
			item.checked = inputAll.checked;
		});
	});

	// 3、循环遍历伪数组, 给所有其他的input标签添加点击事件
	inputOther.forEach(function (item) {
		item.addEventListener('click', function () {
			// 定义一个变量存储原始值
			var res = true;
			// 循环遍历每一个其他input标签对象, 判断checked属性值 
			for (var i = 0; i < inputOther.length; i++) {
				// 如果其他的input标签里面有checked属性值是false的
				if (inputOther[i].checked === false) {
					// 给变量赋值false
					res = false;
					// 只要有一个其他input没有选中,全选input就不会选中 
					// 伪数组中之后的其他input也就不用循环判断了，使用break跳出当前整个循环
					break;
				}
			}
			// 循环结束,  res存储的true或者false, 就是全选input标签checked属性的属性值
			// 将res作为属性值赋值给全选input标签的checked属性
			inputAll.checked = res;
		})
	})
script>

四、原理及步骤说明

---

一、全选按钮需求

1、需求说明

​      全选按钮选中                  其他按钮选中

​      全选按钮取消选中           其他按钮取消选中

2、原理

​      通过 input 标签的 checked 属性值(true / false)来实现。

​      如果表示全选的 input 标签的 checked 属性值为 true ，其他的 input 标签的checked 属性值也为 true 。

​      如果表示全选的 input 标签的 checked属性值为 false ，其他的 input 标签checked 属性值为也为 false 。

3、步骤

​     3 - 1 使用 querySelector 方法获取表示全选的 input 标签；

             使用 querySelectorAll 方法获取所有其他的 input 标签，将它们存储在一个伪数组中。

     3 - 2  给表示全选的 input 标签添加点击事件。

​     3 - 3  循环遍历伪数组中存储的其他的所有 input 标签对象，将全选 input标签的 checked 属性值赋值给其他 input标签的 checked 属性。

二、除全选按钮之外的其他按钮需求

1、需求说明

​      其他的所有按钮都选中              全选按钮选中

​      有一个其他按钮取消选中           全选按钮选中取消选中

2、原理

​      所有其他 input 标签的 checked 属性值都是 true ，全选 input 标签的 checked 属性值是 true。

​      所有其他 input 标签的 checked 属性值有一个是 false , 全选 input 标签的 checked 属性值是 false 。

​      我们可以定义一个变量，根据变量储存的最终结果给全选 input 标签的 checked 属性值赋值 。

3、步骤

​      3 - 1  循环遍历所有其他的 input 标签，为它们绑定点击事件。

​      3 - 2   定义一个变量，赋值 true 。

​      3 - 3  循环遍历所有其他 input 标签，判断其他 input 标签的 checked 属性值是不是 false; 如果是 false ， 给变量赋值 false ， 使用 break 终止循环。

​      3 - 4  将变量储存的数值赋值给全选 input 标签的 checked 属性。

五、完整代码下载

          完整代码免费下载