html – 点击复选框并调用其’.click()’函数有什么区别？

发布时间：2020-12-14 19:31:54 所属栏目：资源来源：网络整理

导读：考虑 the following code： HTML： input type='checkbox' /divClick here/div JS： $(function() { $('input').click(function() { document.write($(this).is(':checked') ? "checked" : "unckecked"); }); $('div').click(function() { $('input').click(

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

当单击复选框时,将检查输出,但如果单击“单击此处”,输出将不会被打开.这是为什么？

解决方法

因为点击事件不同于更改事件,哪个元素更改.当< div>做一个.click()触发了还没有改变复选框状态的点击事件,所以当它检查它时,它处于上一个状态.

当您直接点击< input>时,您已经更改了状态,即使更改事件按顺序触发第二,主要的点是检查状态已更改的复选框,在点击处理程序检查之前,因此状态是当前状态.

如果您想要准确的状态信息寻找并触发更改事件,则如下所示：

$(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>包装输入).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!