全选/取消/反选

<div id="box">

     <button>全选</button>

     <button>取消</button>

     <button>反选</button>

</div>

<div>

    <ul id="lis">

        <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>

</div>

<script>

var btn=document.getElementById("box").getElementsByTagName("button");

var lis=document.getElementById("lis").getElementsByTagName("input");

btn[0].onclick = function(){

    for (var i=0;i<lis.length;i++){

    lis[i].checked=true;

    }

}

btn[1].onclick = function(){

    for (var i=0;i<lis.length;i++){

    lis[i].checked=false;

    }

}

btn[2].onclick = function(){

    for (var i=0;i<lis.length;i++){

        if(lis[i].checked==true){

            lis[i].checked==false

        }else{

             lis[i].checked==true

            }

    }

}

简化效果

var btn=document.getElementById("box").getElementsByTagName("button");
var lis=document.getElementById("lis").getElementsByTagName("input");
function fn(abjt) {
        for(var i=0; i<lis.length; i++){
                lis[i].checked = abjt;
        }
}
btn[0].onclick = function () {
        fn(true);
};
btn[1].onclick = function () {
        fn(false);
};
btn[2].onclick = function () {
        for(var i=0; i<lis.length; i++){
                lis[i].checked == true?lis[i].checked = false:lis[i].checked = true;
        }
}

</script>