Question

嗨我有gridview，它显示所有列和数据。问题是标题中有一个复选框，当单击时，假设使用jquery选中所有行中的复选框。但是，当我单击标题复选框时，网格行中的复选框的其余部分将不会检查。有一些错误，我无法弄清楚为什么当我选择标题复选框时，它不会选中所有行中的其余复选框。请让我知道错误的位置。

 <% @page language="C#" masterPageFile="~/first.master" %>
    <asp:Content ID="xContent" ContentPlaceHolderID="xMainContentContainer" Runat="Server">
        <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
            <script type="text/javascript" language="javascript">
                $("#<%=GridView3.ClientID%> input[id*='chkAll']:checkbox").click(function () {
                    if ($(this).is(':checked'))
                        $("#<%=GridView3.ClientID%> input[id*='chkEmployee']:checkbox").attr('checked', true);
        else
            $("#<%=GridView3.ClientID%> input[id*='chkEmployee']:checkbox").attr('checked', false);
                });          
        </script>

       <h1 class="title" id="page-title">Gridview Page</h1>       
       <form id="Form" runat="server">
            <asp:GridView ID="GridView3" runat="server" AutoGenerateColumns="False"
                BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px"  CellPadding="3" CellSpacing="2">
                <Columns>
                 <asp:TemplateField>
                <HeaderTemplate>
                    <asp:CheckBox runat="server" ID="chkAll" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox runat="server" ID="chkEmployee" />
                </ItemTemplate>
            </asp:TemplateField>
                    <asp:TemplateField HeaderText="Id">
                        <ItemTemplate>
                            <asp:Label ID="Id" runat="server" Text='<%# Eval("Id") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Company">
                        <ItemTemplate>
                            <asp:Label ID="lblCompany" runat="server" Text='<%# Eval("Company") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                     <asp:TemplateField HeaderText="Location">
                        <ItemTemplate>
                            <asp:Label ID="lblLocation" runat="server" Text='<%# Eval("Location") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </form>
    </asp:Content>

Answer 1

如果你想编写自己的jquery位来处理这个问题，你可以这样做：

// select your 'all' checkbox
$('input.all').on('click', function(){
   $('input[type="checkbox"]').prop('checked', this.checked);
});

Answer 2

您想要使用chkAll代替this.Checked来测试是否选中$(this).is(':checked')。

$(document).ready(function (){
    $("#<%= GridView1.ClientID %> input[id*='chkAll']").click(function() {
        $("#<%= GridView1.ClientID %> input[id*='chkEmployee']").attr('checked', this.checked);
    });
});

Answer 3

检查并取消选中所有行。试试这个

 function selectAll(checked) {
        var isChecked = $(checked).attr('checked') ? true : false;
        if (isChecked) {
            $('input:checkbox[name$=chkEmployee]').each(
                    function () {
                        $(this).attr('checked', 'checked');
                    });
        }
        else {
            $('input:checkbox[name$=chkEmployee]').each(
                    function () {
                        $(this).removeAttr('checked');
                    });
        }
    }

并添加像这样的onclick事件

  <HeaderTemplate>
   <asp:CheckBox runat="server" ID="chkAll"  onclick="selectAll(this);" />
  </HeaderTemplate>

使用jquery在gridview中选中复选框

3 个答案: