用Javascript实现checkbox全选、全不选

---

第一篇博客…写了一个小东西实现checkbox全选、全不选，还有可以改进的地方。

Javascript：

window.onload=function(){//方法一：    var selectOrNo = false;    var allSelectDiv = document.getElementById("allSelect");    allSelectDiv.onclick = function(){selectAll(selectOrNo);};    function selectAll(select)    {        selectOrNo = !select;        var allCheckBox = document.all['checkBox'];        if(allCheckBox.length)        {            for(var i=0; i < allCheckBox.length; i++)            {                allCheckBox[i].checked = selectOrNo;            }        }else allCheckBox.checked = selectOrNo;    }//方法二：    var allSelectDiv2 = document.getElementById("allSelect2");    var selectOrNone = false;    var alreadyAllSelect = false;    allSelectDiv2.onclick = function(){allSelect(selectOrNone,alreadyAllSelect);};    function allSelect(selectOrNone,alreadyAllSelect)    {        var allCheckBox = document.all['checkBox'];        if(allCheckBox.length)        {            for(var i=0; i < allCheckBox.length; i++)            {                if(!selectOrNone && !alreadyAllSelect)                {                    if(!allCheckBox[i].checked)                    {//如果有没选中的,执行全选操作                        allSelect(!selectOrNone,alreadyAllSelect);                        break;                    }else if( i==allCheckBox.length-1 && allCheckBox[i].checked)                    {//如果全都选中了，那么执行全不选操作                        allSelect(!selectOrNone,!alreadyAllSelect);                    }                }else if(selectOrNone && !alreadyAllSelect )                {//全选                    allCheckBox[i].checked = true;                }else                {//全不选                    allCheckBox[i].checked = false;                }                               }        }else allCheckBox.checked = true;    }};

  <div id="allSelect"><span>全选</span></div>  <input name="checkBox" type="checkbox" value="1" />  <input name="checkBox" type="checkbox" value="2" />  <input name="checkBox" type="checkbox" value="3" />  <div id="allSelect2"><span>全选2</span></div>