用Javascript实现checkbox全选、全不选

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