js实现复选框全选、反选、取消功能

效果：

js实现复选框全选、反选、取消功能

分析：

1、获取全选按钮对象

2、全选按钮触发时候，让input复选框遍历所有对象

3、全选：checked属性值设为true

     反选：checked属性值取反！

     取消：checked属性值设为false

注意：无论是用js还是jQ来操作checked属性，其值为布尔类型true或false，切忌带引号，否则会出错。

html代码：

<div>
    <button>全选</button>
    <button>反选</button>
    <button>取消</button>
</div>
<ul>
    <li>选项: <input type="checkbox"></li>
    <li>选项: <input type="checkbox"></li>
    <li>选项: <input type="checkbox"></li>
    <li>选项: <input type="checkbox"></li>
    <li>选项: <input type="checkbox"></li>
    <li>选项: <input type="checkbox"></li>
    <li>选项: <input type="checkbox"></li>
</ul>

js方法一：

var btn = document.getElementsByTagName("button");
var inp = document.getElementsByTagName("input");

 btn[0].onclick = function () {
     for (var i = 0; i < inp.length; i++) {
          inp[i].checked = true;//全选
     }
 }

btn[1].onclick = function () {
    for (var i = 0; i < inp.length; i++) {
          np[i].checked = !inp[i].checked;//反选
     }
}

btn[2].onclick = function () {
    for (var i = 0; i < inp.length; i++) {
         inp[i].checked = false;//取消
    }
}

js方法二：

var btn = document.getElementsByTagName("button");
var inp = document.getElementsByTagName("input");

btn[0].onclick = setData("true")
btn[1].onclick = setData(null)
btn[2].onclick = setData("false")

function setData(key){
    return function(){
       for(var i = 0;i < inp.length;i++){
           inp[i].checked = key? key == "false" ? false : true : !inp[i].checked;
       }
    }
}