发布于 

CheckBox全选终极方案

在我们的程序开发中经常会要用到CheckBox的全选，通常情况下是在一些数据绑定控件中如Gridview等

下面以Repeater为例，在Repeater的header 和item中放入CheckBox控件 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<asp:Repeater ID="rptGroup" runat="server">
    <HeaderTemplate>
        <table width="100%" cellspacing="1" >
            <tr>
                <td width="3%" align="center" >
                  <input type="checkbox" id="chkAll" name="chkAll" value="checkbox"
                  onclick="checkAll   ('chkAll',this);" />
                </td>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
        <td align="center" >
          <input type="checkbox" name="chkSelect" value='<%# Eval("ID") %>'
          onclick="checkAll('chkAll',this);"/>
        </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
 </asp:Repeater>

下面就是js脚本了

checkAll方法是实现CheckBox的全选和取消全选的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function checkAll(chkAllID, thisObj) {
    var chkAll = document.getElementById(chkAllID);
    var chks = document.getElementsByTagName("input");
    var chkNo = 0;
    var selectNo = 0;
    for (var i = 0; i < chks.length; i++) {
        if (chks[i].type == "checkbox") {
            //全选触发事件
            if (chkAll == thisObj) {
                chks[i].checked = thisObj.checked;
            }
            //非全选触发
            else {
                if (chks[i].checked && chks[i].id != chkAllID)
                    selectNo++;
            }
            if (chks[i].id != chkAllID) {
                chkNo++;
            }
        }
    }
    if (chkAll != thisObj) {
        chkAll.checked = chkNo == selectNo;
    }
}

checkSelectNo 函数是用来获取 所有checkbox 选中的个数 这个在用来判断 是否有勾选时非常有用。

1
2
3
4
5
6
7
8
9
10
11
12
function checkSelectNo(chkAllID) {
    var chks = document.getElementsByTagName("input");
    var selectNo = 0;
    for (var i = 0; i < chks.length; i++) {
        if (chks[i].type == "checkbox") {
            if (chks[i].id != chkAllID && chks[i].checked) {
                selectNo++;
            }
        }
    }
    return selectNo;
}
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章