点击button按钮实现全选_全选按钮（简单实现）

案例分析

1.当全选按钮选中时，下面的按钮全部点亮，反之全灭。(利用checked)

//找到全选按钮和所有单选按钮

var j_cbAll = document.querySelector('#j_cbAll');

var j_tbs = document.querySelector('#j_tb').querySelectorAll('input');

j_cbAll.onclick = function () {

for (var i = 0; i < j_tbs.length; i++) { //对单选按钮进行遍历

//console.log(this.checked); //对checked进行测试(若选中时为true，未选中是为false)

j_tbs[i].checked = this.checked; //当checked为true时，单选全部选中，反之不选中。

}

}

2.当复选按钮全部点亮时，全选按钮点亮，反之，不亮。

实际上就是循环检查是否所有复选被选中。

for (var i = 0; i < j_tbs.length; i++) { //循环添加事件

j_tbs[i].onclick = function () {

var flag = true;

for (var i = 0; i < j_tbs.length; i++) { //遍历复选按钮

if (!j_tbs[i].checked) { //对复选按钮的checked进行判断