当我检查复选框时，如何更改特定的行样式？ C＃ASP.NET

Question

所以我在ASP.NET上得到了这个gridview，它是关于一个gmail客户端，我创建了一个模板字段，其中有一个复选框，用于同时选择几条消息，但首先当你选择一条消息我要更改行时背景颜色，我已经有我的CSS，但我不知道如何触发操作或如何知道在代码中选择了什么行。 这是我网格的模板：

 <asp:GridView ID="inboxGrid" runat="server" 
        AutoGenerateColumns="false" CssClass="inbox" ShowHeader="false" BorderStyle="None" GridLines="None">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                <asp:CheckBox ID="chkSelect" runat="server" />
                </ItemTemplate>
                <ItemStyle Width="24" CssClass="check"/>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemStyle CssClass="from" />
                <ItemTemplate>
                <asp:Label ID="lblFrom" runat="server" 
                    Text = '<%# Eval("From") %>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemStyle CssClass="subject" />
                <ItemTemplate>
                <asp:Label ID="lblSubject" runat="server" Text='<%# Eval("Subject") %>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemStyle CssClass="date" />
                <ItemTemplate>
                <asp:Label ID="lblFecha" runat="server" Text='<%# Eval("Fecha") %>' />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <RowStyle CssClass="inbox"/>
    </asp:GridView>

Answer 1

这是一个使用JQuery的解决方案

如果您将名为chk的CssClass添加到asp：checkbox

<asp:CheckBox ID="chkSelect" runat="server" CssClass="chk" />

这是脚本

$(document).ready(function () {
        $(".chk :checkbox").live("click", function () {
            $(this).closest("tr").css("background-color", this.checked ? "#0000FF" : "");
        });
    });

Answer 2

尝试这个：

<asp:CheckBox ID="chkSelect" runat="server" OnClick="changeCss(this.id);" />

您可以使用toggleClass('CssClassName')在复选框点击上切换类：

function changeCss(ctrlId){
    $(ctrlId).parent().parent().toggleClass('check');
}

层次结构是tr> td>复选框，我们反过来改变tr / row的css。