zoukankan      html  css  js  c++  java
  • GridView全选和反选用JQuery实现(转)

    <asp:GridView ID="grid" runat="server" AutoGenerateColumns="false" GridLines="Horizontal"
    OnPreRender
    ="grid_PreRender">
    <Columns>
    <asp:TemplateField>
    <HeaderTemplate>
    <input type="checkbox" id="chkAll" />
    </HeaderTemplate>
    <ItemTemplate>
    <input type="checkbox" id="chkItem" code='<%# Eval("Code") %>' />
    </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="Code" HeaderText="Code" HtmlEncode="true" />
    <asp:BoundField DataField="Name" HeaderText="Name" HtmlEncode="true" />
    <asp:BoundField DataField="Age" HeaderText="Age" HtmlEncode="true" />
    <asp:BoundField DataField="Address" HeaderText="Address" HtmlEncode="true" />
    </Columns>
    </asp:GridView>
    //全选/反选
    $("#chkAll").click(function () {
    $('#<%=grid.ClientID %> > tbody > tr > td > input:checkbox').attr("checked", this.checked);
    });

    //若所有tbody中的项都选中了,自动将表头中的chkAll选中.
    $("#<%=grid.ClientID %> > tbody > tr > td > input:checkbox").click(function () {
    //获取所有选中的checkbox元素
    var expression1 = $("#<%=grid.ClientID %> > tbody > tr > td > input:checkbox:checked");
    //获取所有checkbox元素
    var expression2 = $("#<%=grid.ClientID %> > tbody > tr > td > input:checkbox");
    var hasChecked = $(expression1).length == $(expression2).length;
    $("#chkAll").attr("checked", hasChecked);
    });

    //获取表格中选中的值
    $("#btnGetByGridCheckedElement").click(function () {
    var selectedCodes = new Array();
    var checkedItems = $("#<%=grid.ClientID %> > tbody > tr > td > input:checkbox:checked[@name$='chkItem']");
    $.each(checkedItems, function () {
    selectedCodes.push(this.code);
    });
    if (0 == selectedCodes.length) {
    alert("没有选中任何项..");
    return;
    }
    alert(selectedCodes.join(","));
    });



  • 相关阅读:
    黄聪:DEDECMS织梦 真正的随机文章的调用方法
    黄聪:Apache 301重定向中RewriteCond规则参数介绍(转)
    [阅读笔记]fsnotify源码阅读
    [阅读笔记]Go语言并发之美
    NUMA的取舍
    Web服务器那些招
    PHP执行批量mysql语句
    gotour练习解答
    mysql多个TimeStamp设置
    mysql那些招
  • 原文地址:https://www.cnblogs.com/shenyixin/p/2298413.html
Copyright © 2011-2022 走看看