Question

I have this HTML:

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

<div class="icons"><input type="checkbox" checked="checked" />Box 1</div>
<div class="icons"><input type="checkbox" checked="checked" />Box 2</div>
<div class="icons"><input type="checkbox" checked="checked" />Box 3</div>

And this JQuery…

<script>
$(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);
            }
        }
    );

});
</script>

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.

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

Answer 1

I would do it something like this. I think the code is far simpler.

1. Use classes to govern the display. You can toggle the class using jQuery’s toggleClass function.
2. Use jQuery’s .trigger to initiate clicks on the input elements for each div
3. Prevent propagation of clicked inputs from creating an infinite loop.

http://jsfiddle.net/4hLrF/

div.icons {
    background-color:red;
    width:100px;
    height:100px;
    float:left; 
    margin-right:10px;
}

div.checked {
     background: yellow;   
}

$('input').click( function(e) {
    $(this).parent().toggleClass('checked');
    e.stopPropagation();
});

$('div').click( function() {
    $(this).children('input').trigger('click');
});