電商網站之「全選功能」

#設計的知識點：

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原生中，咱們也經常使用來處理兼容性的問題。 }) }