html - 单击复选框和调用其 '.click()' 函数有什么区别？

Question

考虑 the following code :

HTML:

<input type='checkbox' />
<div>Click here</div>

JS:

$(function() {
    $('input').click(function() {
        document.write($(this).is(':checked') ? "checked" : "unckecked");
    });
    $('div').click(function() {
        $('input').click();
    });
});

单击复选框时，输出为选中，但如果单击“Click here”，则输出为未选中。这是为什么？

Answer 1

因为 click事件不同于 change事件，这是元素发生变化的地方。当 <div>做 .click()是触发 click尚未更改复选框状态的事件，因此当它选中它时，它处于以前的状态。

当您直接点击<input> ，你已经改变了状态，即使 change事件按顺序第二次触发，要点是复选框 checked在 click 之前 状态已更改处理程序正在检查它，因此状态是当前的。

如果您想要准确的状态信息，请查找并触发 change而是像这样的事件:

$(function() {
    $('input').change(function() {
        $("span").append("<br />" + (this.checked ? "Checked" : "Uncecked"));
    });
    $('div').click(function() {
        $('input').click().change();
    });
});

You can give it a try here ，这可能不是行为问题，您想要一个外部可点击区域，this is how I'd do it (通过 <label> 包装输入)。