js实现checkbox的全选和反选

    前段时间项目中用到该功能，我便整理了一下，分享给js刚入门的朋友。热烈欢迎大家指点和建议，谢谢！

前端HTML代码如下：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title> 
</head>
<body>
    <form id="form1" runat="server">
    <div id="divCheckBoxList">
    <input id="checkbox1" type="checkbox"  />
        <label for="checkbox1">Red</label>
    <input id="checkbox2" type="checkbox"  />
     <label for="checkbox2">Gold</label>
    <input id="checkbox3" type="checkbox"  />
     <label for="checkbox3">Green</label>
    <input id="checkbox4" type="checkbox"  />
     <label for="checkbox4">Block</label>
    <input id="checkbox5" type="checkbox"  />
      <label for="checkbox5">Yellow</label>
    </div>
        <input type="checkbox" id="selectAll" />
        <label for="selectAll">Select All</label>
        <input type="checkbox" id="chReverse" />
        <label for="selectAll">Reverse</label>
    </form>
</body>
</html>

HTML中有五个颜色的choeckbox，一个Select All的checkbox和一个Reverse的checkbox

一下是JS代码：

<script type="text/ecmascript">
        window.onload = function () {
            var checkboxList = document.getElementById("divCheckBoxList").getElementsByTagName("input");
            var chSelectAll = document.getElementById("selectAll");
            var chReverse = document.getElementById("chReverse");
            var intCheckboxSelectAll = 0;//记录选中的checkbox的个数

            //Select All 
            chSelectAll.onclick = function () {
                intCheckboxSelectAll = 0;
                for (var i = 0; i < checkboxList.length; i++) {
                    if (chSelectAll.checked == true) {
                        checkboxList[i].checked = true;
                        intCheckboxSelectAll++;
                    }
                    else {
                        checkboxList[i].checked = false;
                        intCheckboxSelectAll = 0;
                    }
                }
            }
            for (var i = 0; i < checkboxList.length; i++) {
                checkboxList[i].onclick = function () {
                    if (this.checked == false) {
                        chSelectAll.checked = false;
                        intCheckboxSelectAll--;
                    }
                    else {
                        intCheckboxSelectAll++;
                        if (intCheckboxSelectAll == checkboxList.length) {
                            chSelectAll.checked = true;
                        }
                    }
                }
            }

            //Reverse
            chReverse.onclick = function () {
                intCheckboxSelectAll = 0;
                for (var i = 0; i < checkboxList.length; i++) {
                    checkboxList[i].checked = !checkboxList[i].checked;
                    if (checkboxList[i].checked == true) {
                        intCheckboxSelectAll++;
                    }
                    else {
                        intCheckboxSelectAll = 0;
                    }
                }
                if (intCheckboxSelectAll == checkboxList.length) {
                    chSelectAll.checked = true;
                }
                else {
                    chSelectAll.checked = false;
                }
            }
        }
    </script>

为了实现逐个点击并选中颜色的chockbox时Select All也需要自动的被选中的功能，我定义个一个记录选中checkbox个数的变量intCheckboxSelectAll 。在特定的情况下判断intCheckboxSelectAll的值就能实现相应的功能。

posted @ 2013-02-20 11:17  馋嘴的毛毛  阅读(177)  评论(0)  编辑  收藏  举报