stopPropagation

by halirgb

HTML

<div class="select">
    <div class="control-group">
        <div class="controls">
            <label class="checkbox check" for="checkbox">
                <input type="checkbox" id="checkbox" class="checkbox" />SELECT THIS</label>
        </div>
    </div>
</div>
<div class="select">
    <div class="control-group">
        <div class="controls">
            <label class="checkbox check" for="checkbox">
                <input type="checkbox" id="checkbox" class="checkbox" />SELECT THIS</label>
        </div>
    </div>
</div>

CSS

.select {
    width:150px;
    height:100px;
    background-color:red;
    margin-bottom:10px;
    text-align:center;
    line-height:100px;
    vertical-align:middle;
}

JavaScript

$('.select').click(function (e) {
    var checkbox = $(this).find('input[type=checkbox]')
    checkbox.prop('checked', function (i, checked) {
        return !checked;
    });
});
$('.select input[type=checkbox], label').click(function (e) {
    e.stopPropagation();
});