原生JS实现购物车全选/取消功能（慕课购物车全选功能练习）

购物车可以说是基本要求了吧，逻辑功能挺多，综合功能都写下来，也能提升js基础了。今天就来看看简单点全选/取消功能，并记录已选中的次数（暂无反选）。

HTML部分：

<input type="checkbox" id="checkAll">全选/取消
<ul>
    <li><input type="checkbox" class="selects">大猪头一</li>
    <li><input type="checkbox" class="selects">大猪头二</li>
    <li><input type="checkbox" class="selects">大猪头三</li>
    <li><input type="checkbox" class="selects">大猪头四</li>
    <li><input type="checkbox" class="selects">大猪头五</li>
    <li><input type="checkbox" class="selects">大猪头六</li>
</ul>
<span id="checked">已选</span>

 

 JS逻辑部分：

window.onload = function () {
   
    var checkAll = document.getElementById('checkAll'); // 全选
    var inputs = document.getElementsByClassName('selects'); 
    var checked = document.getElementById('checked'); // 选中的

    //为全选添加事件
    checkAll.addEventListener('change', function () {
        for (i = 0; i < inputs.length; i++) {
            if (checkAll.checked) {
                inputs[i].checked = checkAll.checked;
            }
            else {
                inputs[i].checked = false;
            }
        }
        counts(); // 选中后调用选中个数的函数
    });

    //单个选框添加事件
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].addEventListener('change', function () {
            qxFn();
        });
    }
    var qxFn = function () {
        var count = 0;//定义一个计数变量
        for (var j = 0; j < inputs.length; j++) { // 遍历inputs
            if (inputs[j].checked) { // 如果状态为选中，count+1
                count++;
            }
            if (count == inputs.length) { // 如果被选中的个数等于inputs的长度
                checkAll.checked = true; // 全选checkbox选中
            } else {
                checkAll.checked = false; // 全选checkbox不选中
            }
        }
        counts(); // 重新计算选中的个数
    };
    //计算选项个数

    function counts() {
        var ret = 0; // 存储选中的input的个数
        for (k = 0; k < inputs.length; k++) {
            if (inputs[k].checked) {
                ret++;
            }
        }
        checked.innerHTML = '已选：' + ret + '项';
    }
}

全选效果：

未全选： 

 

首先要捋清思路，然后理解的去写，多写几遍就懂了。