Override Jquery .click Event
<p><strong>I have this HTML:</strong></p>

<pre><code>&lt;style&gt;
div.icons {
    background-color:red;
    width:100px;
    height:100px;
    float:left; 
    margin-right:10px;
}
&lt;/style&gt;

&lt;div class="icons"&gt;&lt;input type="checkbox" checked="checked" /&gt;Box 1&lt;/div&gt;
&lt;div class="icons"&gt;&lt;input type="checkbox" checked="checked" /&gt;Box 2&lt;/div&gt;
&lt;div class="icons"&gt;&lt;input type="checkbox" checked="checked" /&gt;Box 3&lt;/div&gt;
</code></pre>

<p><strong>And this JQuery...</strong></p>

<pre><code>&lt;script&gt;
$(document).ready(function() {
    $("div.icons").click(
        function(){
            if ($(this).children("input").is(":checked")) {
                $(this).css("background-color","yellow");
                $(this).children("input").attr('checked', false);
            } else {
                $(this).css("background-color","red");
                $(this).children("input").attr('checked', true);
            }
        }
    );

});
&lt;/script&gt;
</code></pre>

<p>When I click on a div, jquery changes the background color of the div and unchecks the input inside of it. But when I click on an input checkbox inside of the div, it doesn't check the input box. </p>

<p>Is there a way to override the <code>$("div.icons").click</code> when the checkbox is clicked? Or is there a better way to do this?</p>
