GridView 列标题中的 CheckAll 复选框的 jQuery

Question

我们有一个包含多列的 GridView。其中两列包含复选框，而其余列包含文本框或 DropDownList。

放置 GridView 的表单嵌入到母版页中。

在标题行中使用复选框，我们希望将最后一列中的所有复选框设置为标题中复选框的状态。我们不想设置第四列中的复选框。该复选框的 ID 为“chkUpdate”

我见过的示例每行只有 1 个复选框，并使用 CSS 类来识别它，但是 GridView 行上的两个复选框都使用相同的 CSS 类，并且纯粹必须创建一个新的 CSS 类来识别它似乎是错误的不同列的复选框

我知道我可以在 GridView 的行上使用 every 循环，但无法弄清楚如何识别最后一列中的复选框

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>