Use jQuery to change row color unless checkbox is clicked
<p>I have some table rows with checkboxes.</p>

<pre><code>&lt;table cellpadding="0" class="action_table"&gt;
    &lt;tbody class="action_table_body"&gt;
        &lt;tr class="action_table_row"&gt;
            &lt;td class="action_table_checkbox"&gt;&lt;input type="checkbox" id="chkbx_1"&gt;&lt;/td&gt;
            &lt;td class="action_table_checkbox"&gt;&lt;input type="checkbox" id="chkbx_2"&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>I'm toggling the color of the rows on mouseover events.</p>

<pre><code>$(".action_table_row").mouseenter(function() {
    $(this).css({background:'#FCF6CF'});
}).mouseleave(function() {
    $(this).css({background:'#F3F3F3'});
});
</code></pre>

<p>I also want to highlight rows that are checked:</p>

<pre><code>$('input:checkbox').click(function() {
    if ($(this).attr('checked')) {
        $(this).parent().parent().css({background:'#ff0000'});
    } else {
        $(this).parent().parent().css({background:'#F3F3F3'});
    });
});
</code></pre>

<p>The problem is when these two interact.  I want to maintain the highlighting if a row is checked, thus overriding the mouseenter/mouseleave.</p>

<p>I tried this, but it seems to operate across all rows/checkboxes instead of the specific row with the checked checkbox.</p>

<pre><code>$(".action_table_row").mouseenter(function() {
    if ($(this + ':checkbox').attr('checked') == false) {
        $(this).css({background:'#FCF6CF'});
    }
}).mouseleave(function() {
    if ($(this + ':checkbox').attr('checked') == false) {
        $(this).css({background:'#F3F3F3'});
    }
});
</code></pre>

<p>How do I keep the css from changing if a row's checkbox is clicked?</p>
