这两天做了一个全选反选的案例，用了几种方法，刚开始写的磕磕绊绊，听老师讲解后理清思路，再来写就很容易了。其实还是写代码时候的思路问题。首先要分析功能，然后分步实现，不要搅在一起。下面几种方法为比较精简的方法，用到classList属性，刚开始写的两个方法都比较原始，所以相对比较复杂，就不放上来了。
案例的功能：
1、每个列表项li都能点击切换选中和未选中状态；
2、全选框能点击切换选中和未选中状态，点击选中时，所有列表项li都选中，点击未选中时，所有列表项都为未选中，只要有一个列表项li未选中，全选框切换为未选中状态；
3、反选，点击反选就切换列表项li的状态；
classList
var a.className = "a h g m";
IE8以下不兼容
节点.classList 类数组,节点所有类名的集合
["a","h","g","m"]
a.classList.remove("a","h");//移除a和h
.add() 新增类名
.remove() 移除类名
.toggle() 切换类名（有就加，没有就减）
.contains() 判断是否包含某个类名
var Oul = document.getElementById("ul");
var Ali = Oul.getElementsByTagName("li");
var Oall = document.getElementById("all");
var Oreverse = document.getElementById("reverse");
Length = Ali.length;
//为每个li添加点击事件
for(var i=0; i<Length; i++){
Ali[i].onclick = function(){
this.classList.toggle("checked");
//判断li是否全部被选中
var full = true;
for(var j=0; j<Length; j++){
//若有未选中的li
if(!Ali[j].classList.contains('checked')){
full = false;
break;
}
}
//修改全选框状态
Oall.classList[full ? "add":"remove"]("on");
}
}
//为全选添加点击事件
Oall.onclick = function(){
//获取全选框状态
var bool = this.classList.contains('on');
//根据状态判断是选中还是清除
for(var i=0; i<Length; i++){
Ali[i].classList[bool ? "remove":"add"]("checked");
}
//改变全选框状态
this.classList.toggle("on");
}
//为反选添加点击事件
Oreverse.onclick = function(){
//每个li取反
for(var i=0; i<Length; i++){
Ali[i].classList.toggle("checked");
}
//判断li是否全部被选中
var full = true;
for(var j=0; j<Length; j++){
//若有未选中的li
if(!Ali[j].classList.contains('checked')){
full = false;
break;
}
}
//修改全选框状态
Oall.classList[full ? "add":"remove"]("on");
}
计数器
var Oul = document.getElementById("ul");
var Oli = document.getElementsByTagName("li");
var Length = Oli.length;
var Oall = document.getElementById("all");
var Oback = document.getElementById("reverse");
var count = 0; //当前选中数
//为每个li添加点击事件
for(var i = 0; i< Length; i++){
Oli[i].onclick = function(){
var non = this.classList;
/*if(non.contains('checked')){
non.remove("checked");
count--;
}else{
non.add("checked");
count++;
}*/
//判断当前点击li是去掉勾 还是 加上勾，从而对应的变化计数器
non.contains('checked') ? count--:count++;
//改变点击的li状态
non.toggle("checked");
//判断是否全选，改变全选框状态
Oall.classList[count === Length ? "add":"remove"]("on");
}
}
//为全选添加点击事件
Oall.onclick = function(){
var bool;//判断当前全选状态，修改计数器的值
if(this.classList.contains('on')){
bool = false;
count = 0;
}else{
bool = true;
count = Length;
}
for(var i =0; i<Length; i++){
Oli[i].classList[bool ? "add":"remove"]("checked");
}
//改变全选框状态
this.classList.toggle("on");
}
//为反选添加点击事件
Oback.onclick = function(){
//修改计数器的值
count = Length - count;
for(var i = 0 ; i<Length; i++){
Oli[i].classList.toggle("checked");
}
//判断是否全选，改变全选框状态
Oall.classList[count === Length ? "add":"remove"]("on");
}
checkbox
单选框和复选框，他们个人的选中状态，在js里面呈现是以布尔值方式呈现的
- 选框节点.checked 得到一个布尔值
- 选框节点.checked = true; 将选框变成被选中状态
- 选框节点.checked = false; 将选框变成不被选中状态
通过js这样操作的checked属性，不会影响节点的标签属性
