checkbox元素的全选和反选

<button id="ckall">全选</button>
<button id="fck">反选</button>
<button id="allnck">全不选</button>
<input type="checkbox" class="item"/>篮球
<input type="checkbox" class="item"/>足球
<input type="checkbox" class="item"/>羽毛球
<input type="checkbox" class="item"/>乒乓球
<input type="checkbox" class="item"/>排球
<input type="checkbox" class="item"/>棒球
<script>
    var itemlist=document.querySelectorAll(".item");
    ckall.onclick=function(){
        for(var i=0;i<itemlist.length;i++)
        {
            itemlist[i].checked=true;
        }
    }
    fck.onclick=function(){
        for(var i=0;i<itemlist.length;i++)
        {
            if(itemlist[i].checked){
                itemlist[i].checked=false;
            }
            else{
                itemlist[i].checked=true;
            }
        }
    }
    allnck.onclick=function(){
        for(var i=0;i<itemlist.length;i++)
        {
            itemlist[i].checked=false;
        }
    }
</script>

代码优化

<script>
    //代码优化
    ckall.onclick=function(){
        changeSt(1);
    };
    fck.onclick=function(){
        changeSt(3);
    };
    allnck.onclick=function(){
        changeSt(2);
    };
    function changeSt(num){
        for(var i=0;i<itemlist.length;i++){
            switch (num){
                case 1:
                    itemlist[i].checked=true;
                    break;
                case 2:
                    itemlist[i].checked=false;
                    break;
                default:
                    if(itemlist[i].checked){
                        itemlist[i].checked=false;
                    }
                    else{
                        itemlist[i].checked=true;
                    }
                    break;
            }
        }
    }
</script>