2013-07-24 41 views
0

您好我有gridview顯示所有列和數據罰款。問題是在標題中有一個複選框,當點擊時是假設使用jquery複選所有行中的複選框。 但是,當我單擊標題複選框其餘的網格行中的複選框將不會檢查。有一些錯誤,我不知道爲什麼當我選擇標題複選框時,它不會選擇所有行中複選框的其餘部分。請讓我知道錯誤在哪裏。使用jquery在gridview中選擇複選框

<% @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> 

回答

0

你想測試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); 
    }); 
}); 
0

,如果你想編寫自己的jQuery位,以處理這個問題,你可以這樣做:

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

onclick事件能詳細一點如何使用此功能。我是jquery的新手。謝謝 –

0

檢查並取消選中所有行。試試這個

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'); 
        }); 
     } 
    } 

,並添加這樣

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