javascript - 复选框检查验证

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

每当我点击输入时，它都会准确地显示输入变成的内容(如果我打开输入，它会警告 true)
但每当我单击 div/标签时，它都会执行相反的操作(当输入打开时，它会发出 false 警报)

有没有办法测试输入是否在两种情况下而不是 1 下打开和关闭？

[我假设发生这种情况的原因是因为一个是由浏览器触发的，它在 jquery 之前发生(尽管我假设 jquery 应该首先发生，但无论如何)，而在另一种情况下，jquery 在触发之前运行“已检查”，但似乎无法弄清楚如何将触发器延迟到脚本之后，或强制其在脚本之前运行。]

提前致谢!

Answer 1

您可以监控change()在复选框本身上，然后在 DIV 上单击您可以直接更改复选框中的值，然后触发 change()而不是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();
    }
});

此外，如果您的目的是避免整个 <label for="" />烦人，看看这个。

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