When i Check the Checkbox how do I change that specific row style? C# ASP.NET


Tags: c#,asp.net,css,gridview

Problem :

So i got this gridview on ASP.NET, it is about a gmail client, i made a template field with a check box that is for select several message at the same time, but first when you select a message i want to change the row background color, I already have my CSS but i dont know how to trigger the action or how to know what row was selected in the code. Here is the template of my grid:

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


Solution :

Here is a solution using JQuery

Provided you add a CssClass named chk to asp:checkbox

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

Here is the script

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

    CSS Howto..

    How to create a button to every list item which opens a menu over it?

    ckeditor - how to get custom-css with id to work?

    How do I make an image only overflow (hidden) on the bottom if it exceeds it's container div?

    How to style form submit button in CSS?

    how to select the 2nd child Div of a div using CSS

    How do you override CSS applied by jQuery UI theme properly?

    How do you name these tags in CSS? [closed]

    How to add a close button to alertify log with CSS?

    How do i make part of a CSS background fit perfectly to a browser

    How can I write in CSS if I'm using list tag for this? [closed]

    How to specify size of thumbnails for photos that are hosted externally?

    How can I target text input fields with CSS?

    How to Troubleshoot CSS?

    how to avoid duplicate css when using vendor prefixes?

    How to get rid of duplicating image when applying own style to Radio/CheckButtons in GTK with CSS?

    How to keep CSS class on menu item with dropdown

    CSS: How to change css class of li in a navigation

    HTML/ CSS: A href exceeds linking image - how to avoid?

    JavaScript: How to get a dynamically created element's width?

    How to create this quote box with (preferably) HTML5/CSS3?

    How to achieve “paper-like” background effect? [closed]

    How can i see or how do i know where to put the control according to the screen when using css?

    How can I instantly stop a CSS animation on hover?

    How do I resize images on Android?

    W3.CSS how to make container centered inside another container

    How can I create CSS sprites from images stored in the database?

    How to disable css warning “Unknown property” in Eclipse Mars?

    How to increase the width size of JQuery UI Tooltip by its default value?

    CSS - how to make the end of the word blurry?

    How do I alter this HTML/CSS to make the container expand horizontally to the floated children?