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
属性。