checkbox实现全选（页面如果套用母板也可通用）

木子木啊

于 2014-01-17 16:02:22 发布

阅读量761

点赞数

分类专栏： C# 文章标签： checkbox实现全选

本文链接：https://blog.youkuaiyun.com/xiao_chengzj/article/details/18409489

版权

C# 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了如何使用jQuery实现多选框的联动全选功能，包括全选按钮的触发机制和子项选择状态的变化逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//脚本
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(function () {
        //全选
        $("#chkAll").click(function () {
            //所有checkbox跟着全选的checkbox走
            $('input[id*=chkbox]').attr("checked", this.checked);
        });
        // 如果去除一项或多项子项中勾选则同时取消全选状态
        $('input[id*=chkbox]').click(function () {
        //获取页面所有checkbox个数
            var tlen = $('input[id*=chkbox]').length;
            //获取被选中checkbox个数
            var len = $('input[id*=chkbox]:checked').length;
            //两者对比
            var flag = tlen == len;
            $("#chkAll").attr("checked", flag);
          
        });
       
    })
</script>

//GirdView
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
        <Columns>
            <asp:BoundField DataField="id" HeaderText="编号" />
            <asp:TemplateField>
                <HeaderTemplate>
                    <input id="chkAll" type="checkbox" />
                </HeaderTemplate>
                <ItemTemplate>
                    <input id="chkbox" type="checkbox" runat="Server"/>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>