GridView列标题中CheckAll复选框的jQuery

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

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

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

我看到的示例每行只有一个复选框，并使用CSS类来标识它，但是GridView行上的两个复选框使用相同的CSS类，而且仅仅为了标识不同的复选框列而创建一个新的CSS类似乎是错误的

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

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

函数checkAll（objRef）{
$（“#tr”）。每个（函数（）{
//这里有什么？=objRef.checked；
};
}

---

我希望我已经解释了我的要求，但如果有人需要进一步的澄清，请随时询问

基本上，您可以使用jQuery的end with selector-

id*=“chkSelected”

。它将选中所有复选框end with

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>

var checkBoxSelector='#输入[id*=“chkSelected”]：复选框'；
$（文档）.ready（函数（）{
$（'#btnCheckAll'）.live（'单击'，函数（）{
如果（$（'#btnCheckAll'）。是（':checked'））{
$（checkBoxSelector）.attr（'checked'，true）；
}
否则{
$（checkBoxSelector）.attr（'checked'，false）；
}
});
});

我就是这样做的

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

//jQuery选择gvStudents最后一列（第四列）上的所有复选框
函数SelectAllCheckboxesCol（chk）
{
$（'#>tbody>tr>td:n子项（4）>input:checkbox'）.attr（'checked'，chk.checked）；
//这是可行的，但一定有更好的方法！jQuery还不是我的强项：）
cBox.attr（'checked'，chk.checked）；//选中所有复选框
cBox.click（）；//全部单击以启动Highlightrow（）函数。这将取消勾选复选框！
cBox.attr（'checked'，chk.checked）；//再次检查它们！
}
//jQuery高亮显示选定的行
功能HighlightRow（chk）{
var isChecked=chk.checked；
var$selectedRow=$（“#”+chk.id）.parent（“td”）.parent（“tr”）；
var selectedIndex=$selectedRow[0]。行索引；
var sColor=''；
如果（已选择索引%2==0）
sColor=“#EEEEEE”；
其他的
颜色=白色；
如果（已检查）
$selectedRow.css({
“背景色”：“黄色”，
“颜色”：“黑色”
});
其他的
$selectedRow.css({
“背景色”：sColor，
“颜色”：“黑色”
});
}
}

上述功能包括：

• 没有代码隐藏
• 同时高亮显示一行，并恢复原始备用行背景
• 仅选择特定列和特定Gridview的复选框

缺点：

• 它要求您硬编码Gridview的名称，并指定列号

---

我会完全按照你说的做，为你想要的复选框创建一个单独的类。然后使用jQuery选择器来访问它们。无耻的自我提升：这种方法的“缺点”是它要求您在Gridview ID中硬编码。有没有一种方法可以不硬编码也这样做？