javascript 全选与反选

时间：2014-10-08 14:26:05 收藏：0 阅读：221

<html>
<head>
<title>全选与反选</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" language="javascript">
    // --列头全选框被单击---
    function ChkAllClick(sonName, cbAllId) {
        var arrSon = document.getElementsByName(sonName);
        var cbAll = document.getElementById(cbAllId);
        var tempState = cbAll.checked;
        for (i = 0; i < arrSon.length; i++) {
            if (arrSon[i].checked != tempState)
                arrSon[i].click();
        }
    }

    // --子项复选框被单击---
    function ChkSonClick(sonName, cbAllId) {
        var arrSon = document.getElementsByName(sonName);
        var cbAll = document.getElementById(cbAllId);
        for (var i = 0; i < arrSon.length; i++) {
            if (!arrSon[i].checked) {
                cbAll.checked = false;
                return;
            }
        }
        cbAll.checked = true;
    }

    // --反选被单击---
    function ChkOppClick(sonName) {
        var arrSon = document.getElementsByName(sonName);
        for (i = 0; i < arrSon.length; i++) {
            arrSon[i].click();
        }
    }
</script>
</head>

<body>
    <form id="Form1" runat="server">
             <INPUT name="chkAll" id="chkAll" title="全选" onClick="ChkAllClick(‘chkSon‘,‘chkAll‘)" type="checkbox" />全选

             <INPUT name="chkOpposite" id="chkOpposite" title="反选" onClick="ChkOppClick(‘chkSon‘)" type="checkbox" />反选

             <input type="button" id="add" name="add" onclick="AddTOWISH()" value="add"/>
             <br />
             <%for (int i = 0; i < 10; i++)
               {%>
                 <INPUT name="chkSon" id=‘chkSon<%=i+1 %>‘ type="checkbox" value=‘<%=i+1 %>‘ onclick="ChkSonClick(‘chkSon‘,‘chkAll‘)" /><%=i+1 %>
             <br />
             <%} %>
    </form>
</body>
</html>