Question

（jQuery 1.4.4）我有一个复选框，它有一个.change（）监听器，当用户点击复选框时工作正常，但是现在当我以编程方式更改jQuery中的复选框时，我也需要它来启动.attr（'checked'，'checked'）。我非常乐意使用其他方法来完成这项工作。感谢。

$('#foo').attr('checked', 'checked'); // programmatically change the checkbox to checked, this checks the box alright

$('#foo').change( function() {
  // this works when user checks the box but not when the above code runs
}

Answer 1

如果你正在使用jQuery＆gt; 1.6，你可以通过定义attrHook;

来巧妙地做到这一点

jQuery.attrHooks.checked = {
    set: function (el, value) {
        if (el.checked !== value) {
            el.checked = value;
            $(el).trigger('change');
        }
    }
};

正如评论中所指出的，如果新值与旧值相同，则if会避免触发change事件。

......虽然你真的应该使用prop()，但它应该是;

jQuery.propHooks.checked = {
    set: function (el, value) {
        if (el.checked !== value) {
            el.checked = value;
            $(el).trigger('change');
        }
    }
};

你可以在这里看到这个; http://jsfiddle.net/2nKPY/

对于jQuery＆lt; 1.6（或者如果你不想添加propHook）你可以做的最好是覆盖attr()方法（或升级:)）;

(function () {
    var existingAttr = jQuery.fn.attr;

    jQuery.fn.attr = function (attr) {
        var result = existingAttr.apply(this, arguments);

        if (result instanceof jQuery && attr == "checked") { // If we're dealing with a check-set operation.
            result.trigger('change');
        }

        return this;
    };    

}());

You can see this in operation here

Answer 2

怎么样：

$('some selector').trigger('click');

Answer 3

使用jquery click（）更改复选框的状态，而不是更改其属性。

没有你所有的标记我不确定这是多么合适，但我最近使用这种方法效果很好。

Answer 4

只有当checked的值实际发生变化时才会触发。在Matt的回答中，即使将相同的值分配给复选框，它也会触发。

$.propHooks.checked = {
    set: function (el, value) {
        if (el.checked !== value) {
            trigger = true;
        } else {
            trigger = false;
        }
        el.checked = value;
        if (trigger) {
            $(el).trigger('change');
        }
    }
};

Answer 5

如果你有一个相对较新版本的JQuery，你可以使用.prop（）函数以编程方式更改复选框：

$(".myCheckbox").prop("checked", true);
$(".myCheckbox").prop("checked", false);

Answer 6

我正在开发一个基于复选框状态交换图像的插件，我也遇到了这个问题。

为了使问题复杂化，我正在使用的许多预先存在的代码（围绕？;））期望更改事件来自用户交互 < / em>，因此当复选框 以编程方式 选中/取消选中时触发click（）会导致其他事件触发，不应该（这些其他处理程序只应在用户更改值时运行。

我解决的解决方案是将我的图像更新处理程序绑定到“更改”事件和我称之为“updateicon”的自定义事件。然后，在propHooks.checked.set（）中，我触发此“updateicon”事件。这会导致图标更新程序以与用户单击输入时相同的方式更改图标，但不会导致先前绑定的更改/点击处理程序失败。

事件处理程序绑定：

input.on("change updateicon", toggleIconVisibility);

属性更改挂钩：

jQuery.propHooks.checked = { set: function (el, value) { el.checked = value; $(el).trigger('updateicon'); } };

注意：在我最新的代码草案中，我运行$（el）.filter（“。iconified”）。trigger（“updateicon”），以便只触发元素上的“updateicon”被我的插件“图标化”

需要复选框更改事件以响应以编程方式完成的已检查状态的更改

6 个答案: