jQuery & JavaScript

Highlight a GridView row when its check box is ticked (jQuery and CSS)

jQuery & JavaScript · By the Postback Notes editorial team · Published 2026-09-06

In a grid where users tick rows before an action, a coloured background on the ticked rows shows the selection at a glance. jQuery toggles a class when a box changes; the server applies the same class after a postback; and in recent browsers, CSS alone can do it.

Markup and CSS

<asp:GridView ID="gvTasks" runat="server" AutoGenerateColumns="false" DataKeyNames="TaskId"
    CssClass="tasks" OnRowDataBound="gvTasks_RowDataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate><asp:CheckBox ID="chkRow" runat="server" CssClass="row-check" /></ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="Task" />
        <asp:BoundField DataField="Owner" HeaderText="Owner" />
    </Columns>
</asp:GridView>
<style>
  .tasks tr.is-checked td { background: #e6f4f1; }
  .tasks tr.is-checked td:first-child { box-shadow: inset 4px 0 0 #0e6a70; }
</style>

The extra inset bar on the first cell keeps the selection visible to users who do not perceive the background colour difference.

jQuery

$(function () {
  var $grid = $(".tasks");

  // check box -> row class
  $grid.on("change", ".row-check input", function () {
    $(this).closest("tr").toggleClass("is-checked", this.checked);
  });

  // click anywhere on the row toggles the box (but not when clicking links or the box itself)
  $grid.on("click", "tr", function (e) {
    if ($(e.target).is("a, input, label, button")) return;
    var $cb = $(this).find(".row-check input");
    if ($cb.length) $cb.prop("checked", !$cb.prop("checked")).trigger("change");
  });

  // initial state (e.g. after a postback)
  $grid.find(".row-check input:checked").closest("tr").addClass("is-checked");
});

The CssClass of an asp:CheckBox goes on a wrapping <span>, hence the selector .row-check input. Setting checked from script does not raise change, so the row click triggers it explicitly.

Server side after postback

The initial-state line above already restores the highlight from the posted check boxes. If you set the boxes from data on the server, add the class there too, so the row is correct even before scripts run:

protected void gvTasks_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType != DataControlRowType.DataRow) return;
    var task = (TaskItem)e.Row.DataItem;
    var chk = (CheckBox)e.Row.FindControl("chkRow");
    chk.Checked = task.Flagged;
    if (chk.Checked) e.Row.CssClass += " is-checked";
}

CSS only with :has()

The :has() selector, supported by current versions of all major browsers, styles a row according to its content, without any script:

.tasks tr:has(.row-check input:checked) td { background: #e6f4f1; }

Keep the jQuery version if you must support older browsers, or use it as a fallback alongside the CSS rule.

Related

Accessibility notes

The highlight is a visual aid; the state that assistive technology reads is the check box itself, so every box needs an accessible name. A box in a grid row has no visible label of its own: add one with InputAttributes, for example chk.InputAttributes["aria-label"] = "Select task " + task.Title; in RowDataBound. Making the whole row clickable is convenient for mouse users; keyboard users still use the box, which remains focusable.

Official documentation