HTML部分：
//容器<div class="container"><div class="all">全选<div class="checkbox"></div></div><div class="btns"><div class="checkbox"></div><div class="checkbox"></div><div class="checkbox"></div><div class="checkbox"></div><div class="checkbox"></div><div class="checkbox"></div></div></div>
JS部分：
1：通过CSS选择器获取dom对象
知识点：CSS选择器
document.querySelector() 返回匹配指定选择器的第一个元素
document.querySelectorAll()返回文档中匹配指定 CSS 选择器的所有元素，返回NodeList对象。NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始
var all = document.querySelector('.all .checkbox');var checkboxs = document.querySelectorAll('.btns .checkbox')var btns = document.querySelector('.btns');
2：事件触发:
知识点：事件监听函数
添加事件监听.addEventListener(事件类型，事件处理函数) 。
移除事件监听.removeEventListener(事件类型，事件处理函数)。
all.addEventListener('click', handlerClickAll);btns.addEventListener('click', handlerClickOne);
3:单选按钮：
知识点：事件委托
事件委托也叫事件代理，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
此时单个按钮checkbox的点击事件委托给了父元素btn,利用btn去监听checkbox的点击事件。
e = e || event:一种兼容写法。
e.target：target 事件属性可返回事件的目标节点（触发该事件的节点）
e.target.nodeName //获取事件触发元素标签name（li,p...）
e.target.id//获取事件触发元素id
e.target.className//获取事件触发元素类名
e.target.innerHTML//获取事件触发元素的内容
.getAttribute ：读取元素的属性值
.indexOf:字符串查找方法，没有找到对应匹配的字符返回-1
function handlerClickOne(e) {e = e || event;// 返回元素节点var target = e.target;// 获取元素标签名 注意返回值是大写。if (target.nodeName === 'DIV') {if (target.getAttribute('class').indexOf('active') === -1) {target.classList.add('active');} else {target.classList.remove('active');}}}
4：多选按钮
function handlerClickAll() {// 我们此时需要一个判断 : // - all里面是否存在 active ; // - 如果存在我们就删除active; // - 如果不存在我们就添加active;// all.getAttribute("class") : 获取结果是字符串;// 用字符串方法indexOf 判断是否存在 active类名; if (all.getAttribute('class').indexOf('active') === -1) {// 给all添加active类名;all.classList.add('active');// 遍历所有的checkbox元素; for (var i = 0; i < checkboxs.length; i++) {// 添加active类名;checkboxs[i].classList.add('active');} } else {// 删除active类名all.classList.remove('active');// 遍历所有的checkbox元素; for (var i = 0; i < checkboxs.length; i++) {// 删除active类名checkboxs[i].classList.remove('active');}}}
