Question

HTML:

<div>
    <input>
    <label>
</div>

JS:

$('div input').live('click',function(){
    alert($(this).is(':checked'));
});
$('div').live('click,'function(e){
    if(!$(e.target).is('input'))
        $(this).find('input').click();
});

Whenever I click on the input it accurately displays what the input turns into (if I turn on the input it alerts true)
But whenever I click on the div/label it does the opposite (when the input turns on it alerts false)

Is there a way to test whether the input is being turned on and off in both circumstances instead of 1?

[I assume that the reason this is happening because one is triggered by the browser which happens before jquery (even though I assumed jquery should happen first, but whatever) and in the other case the jquery is running before the trigger of the ‘checked’, but can’t seem to figure out how to either delay the trigger until after the script, or force it to run before the script.]

Thanks in advance!

Answer 1

You can monitor change() on the checkbox itself, then on DIV click you can change the value in the checkbox directly and then trigger change() instead of click().

$('input[type="checkbox"]').live('change',function(){
    alert($(this).is(':checked'));
});

$('div').live('click',function(e){
    if(!$(e.target).is('input')) {
        var $input = $(this).find('input');
        $input.prop("checked", !$input.is(':checked')).change();
    }
});

Also, if your purpose is to avoid the whole <label for="" /> annoyance, check this out.

<label><input type="checkbox" value="awesome" /> Check it</label>