jQuery for GridView列標題中的CheckAll CheckBox

Question

我們擁有一個包含多列的GridView。其中兩列包含CheckBoxes，其餘包含TextBoxes或DropDownLists。

GridView被放置的表單被嵌入到主頁面中。

使用標題行中的複選框，我們希望將最後一列中的所有複選框設置爲標題中複選框的狀態。我們不想設置第4列中的複選框。複選框的ID爲「chkUpdate」

示例我所看到的每行只有1個複選框，並使用CSS類標識它，但我們的GridView行上的兩個複選框使用相同的CSS類，有純粹創建一個新的CSS類，以確定的CheckBox

的不同的專欄中，我知道我可以使用的每個循環在GridView上的行，但不能制定出如何識別在最後一欄的複選框

function checkAll(objRef) { 
    $("#<%=gv_Vials.ClientID %> tr").each(function() { 
    //What goes here? = objRef.checked; 
    }; 
} 

我希望我已經解釋了我的需求，但如果有人需要進一步澄清，請隨時詢問

Answer 1

基本上，你可以使用jQuery的選擇器結尾 - id*="chkSelected"。它會選擇所有複選框結束與chkSelected

<asp:GridView runat="server" ID="gv_Vials"> 
    <Columns> 
     <asp:TemplateField> 
      <HeaderTemplate> 
       <input id="btnCheckAll" type="checkbox" name="AllCheck" /> 
      </HeaderTemplate> 
      <ItemTemplate> 
       <asp:CheckBox runat="server" ID="chkSelected" Checked='<%# bool.Parse(Eval("IsActive").ToString()) %>'/> 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 
<script> 
    var checkBoxSelector = '#<%=gv_Vials.ClientID%> input[id*="chkSelected"]:checkbox'; 

    $(document).ready(function() { 
     $('#btnCheckAll').live('click', function() { 
      if ($('#btnCheckAll').is(':checked')) { 
       $(checkBoxSelector).attr('checked', true); 
      } 
      else { 
       $(checkBoxSelector).attr('checked', false); 
      } 
     }); 
    }); 
</script> 

Answer 2

這是我要做的事。

ASP.net：

  <asp:GridView ID="gvStudents" runat="server" DataSourceID="SqlDataSourceStudents" AutoGenerateColumns="False" Width="100%" OnRowDataBound="gvStudents_RowDataBound"> 
       <HeaderStyle BackColor="#5D7B9D" ForeColor="White" /> 
       <AlternatingRowStyle BackColor="#EEEEEE" /> 
       <RowStyle BackColor="White" /> 
       <Columns> 
**..normal column templates or boundfields go here..** 
        <asp:TemplateField> 
         <HeaderTemplate> 
          <asp:CheckBox id="CheckBoxAll" runat="server" onclick="javascript:SelectAllCheckboxesCol(this);"/> 
         </HeaderTemplate> 
         <ItemTemplate> 
          <asp:CheckBox ID="CheckBoxAdd" runat="server" onclick="javascript:HighlightRow(this);"/> 
         </ItemTemplate> 
         <ItemStyle HorizontalAlign="Center" /> 
        </asp:TemplateField> 
       </Columns> 
      </asp:GridView> 

的jQuery：

 //jQuery to select all checkboxes on the last column (4th column) of gvStudents 
     function SelectAllCheckboxesCol(chk) 
     { 
      $('#<%=gvStudents.ClientID %> >tbody >tr >td:nth-child(4) > input:checkbox').attr('checked', chk.checked); 

      //this works but there must be a better way! jQuery is not my fortae yet :) 
      cBox.attr('checked', chk.checked); //check all the checkboxes 
      cBox.click();      //click them all to fire the Highlightrow() function. This un-ticks the checkboxes! 
      cBox.attr('checked', chk.checked); //re-check them again! 
     } 

     //jQuery to highlight a row selected 
     function HighlightRow(chk) { 
      var isChecked = chk.checked; 
      var $selectedRow = $("#" + chk.id).parent("td").parent("tr"); 
      var selectedIndex = $selectedRow[0].rowIndex; 
      var sColor = ''; 

      if(selectedIndex%2 == 0) 
       sColor = '#EEEEEE'; 
      else 
       sColor = 'white'; 

      if(isChecked) 
       $selectedRow.css({ 
        "background-color" : "Yellow", 
        "color" : "Black" 
       }); 
      else 
       $selectedRow.css({ 
        "background-color" : sColor, 
        "color" : "Black" 
       }); 
     } 
} 

具有上述的特點是：

• 後面
• 高亮行沒有代碼在同一時間，並恢復原始備用行背景
• 只選擇一個特定的列和特定的GridView的複選框

缺點：

• 它需要你硬編碼在GridView的名稱和具體列號