jquery - 需要复选框更改事件来响应以编程方式完成的选中状态的更改

Question

(jQuery 1.4.4) 我有一个复选框，它有一个 .change() 监听器，当用户单击该复选框时该监听器可以正常工作，但现在当我以编程方式更改 jQuery 中的复选框时，我还需要使用它来触发.attr('已检查', '已检查').我非常乐意使用其他方法来完成这项工作。谢谢。

$('#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 > 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 < 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