电商网站之“全选功能”

#设计的知识点：

1.事件代理.(因为咱们的购物车信息是动态生成的，因此咱们只能指定动态生成)
【首先咱们要明确的是此处的页面结构的是table>thead>tbody】
咱们的信息将放在tbody中。
let tbody = document.querySelector('tbody');
tbody.onchange = function(evt) {
    //判断事件代理的目标元素
    if(evt.target.tagName === "INPUT") {
    //咱们来判断目标元素的选中状态，checked的状态用true与false来判断。【咱们不能经过getAttribute来取得选中状态】
    
    
        if(evt.target.checked === true) {
            evt.target.parentNode.parentNode.classList.add('selected');
        }else{
            evt.target.parentNode.parentNode.classList.remove('selected');
        }
        //判断是否改变全选按钮的状态：
        //选中的checkbox === 所有的CheckBox,此时要所有选中
        var allCheckboxCount = document.querySeletcorAll('tbody input[type=checkbox]').length;
        //取到被选中的checkbox的数量
        var checkedCount = document.querySelectorAll('tbody input[type=checkbox]:checked').length;
        
        document.querySelector('thead input[type=checked]') = allCheckboxCount === checkedCount;
    }
}

//上述代码中，咱们通常运用到的内容是事件代理，而后进行必要的事件代理判断。应注意的是checkbox的状态咱们只能经过布尔值来进行判断，而不能经过getAttribute来获取。经过判断true与false来添加类。
复制代码

document.querySelector('thead input[type=checkbox]').onchange = function (evt) { var status = this.checked; //this在各类状况下的指向，也是咱们必需要熟知的重点，通常的，在事件中，this的指向就是on前面的元素。this的指向问题，着实让我以为有点事件“肇事者”的意思。 var all = document.querySelectorAll('tbody input[type=checked]'); all.forEach(checkbox => { //箭头函数是ES6独有的特性，复杂的箭头函数也极会容易引发咱们的不适，可是整它的办法仍是有的，有一种转码器叫作Babel，一般咱们用它来ES6中的箭头函数转换到ES5中的普通函数。【它用来处理兼容性的问题】 //有关forEach的遍历问题，与其它者的不一样之处，也将在最近发表文章进行说明。 checkbox.checked = status; status? checkbox.parentNode.parentNode.classList.add('selected'): checkbox.parentNode.aprentNode.classList.remove('selected'); //三目运算符【我常常取名叫作三木童子^_^】，在js原生中，咱们也经常使用来处理兼容性的问题。 }) }