 <p>You can use,</p> <p>Your html,</p> <pre><code>&lt;table&gt; &lt;tr class="" role="row"&gt; &lt;td class="e-rowcell e-templatecell" role="gridcell" style="text-align: center;"&gt; &lt;input type="checkbox" class="XAxisrowCheckbox"&gt; &lt;/td&gt; &lt;td class="e-rowcell e-hide" role="gridcell" style="text-align: left;"&gt;0&lt;/td&gt; &lt;td class="e-rowcell" role="gridcell" style="text-align: left;"&gt;Location ID&lt;/td&gt; &lt;/tr&gt; &lt;tr class="e-alt_row" role="row" aria-selected="true"&gt; &lt;td class="e-rowcell e-templatecell e-selectionbackground e-active" role="gridcell" style="text-align: center;"&gt; &lt;input type="checkbox" class="XAxisrowCheckbox"&gt; &lt;/td&gt; &lt;td class="e-rowcell e-hide e-selectionbackground e-active" role="gridcell" style="text-align: left;"&gt;1&lt;/td&gt; &lt;td class="e-rowcell e-selectionbackground e-active" role="gridcell" style="text-align: left;"&gt;Location Name&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>Create class called <code>red</code>,</p> <pre><code>.red { background-color: red; } </code></pre> <p>Simply apply class when Checkbox is checked</p> <pre><code>$(document).on('click', '.XAxisrowCheckbox', function () { $(this).parents("tr").toggleClass("red", this.checked); }); </code></pre> <p><a href="http://Fiddle" rel="nofollow"><strong>Fiddle Demo</strong></a></p>