Question

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

单击该复选框时，输出为checked，但如果单击“单击此处”，则输出为unckecked。那是为什么？

Answer 1

因为click事件与change事件不同，后者是元素更改的位置。当<div>执行时，.click()会触发尚未更改复选框状态的click事件，因此当它检查时，它处于先前状态。

当您在<input>上直接点击时，您已经更改了状态，即使change事件按顺序触发第2个，主要点是复选框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>包装输入）。

单击复选框并调用其'.click（）'函数有什么区别？

1 个答案: