Question

使用jQuery prop()检查的框不会影响附加到change处理程序的侦听器。

我的代码就像

HTML

<div>
    <label>
        <input type="checkbox" class="ch" />test</label>
    <label>
        <input type="checkbox" class="ch" />test</label>
    <label>
        <input type="checkbox" class="ch" />test</label>
    <input type="button" value="check the box" id="select" />
</div>

JS

 $("body").on("change", ".ch", function(){

  alert("checked");

});


$("body").on("click", "#select", function(){

  $(this).parent("div").find("input[type=checkbox]").prop("checked", true);

});

单击复选框时会触发警报。当复选框的属性发生变化时，如何触发它？ JSBIN

Answer 1

您必须使用.change()来触发更改事件侦听器：

$("body").on("change", ".ch", function () {
    alert("checked");
});


$("body").on("click", "#select", function () {
    $(this).parent("div").find("input[type=checkbox]").prop("checked", true).change();
});

JSBbin或Fiddle

请注意，这将引发许多事件。你在jsBin的html例子中有三个。

Answer 2

从您的函数内部触发事件：

$("body").on("click", "#select", function(){
  $(this).parent("div").find("input[type=checkbox]").prop("checked", true).trigger("change");
});

Answer 3

在大多数情况下，更新属性时触发更改事件应该是接受的答案，但是，在某些情况下会调整属性，并且您无需添加触发器函数调用。一个常见的例子是外部托管脚本。

下面的代码片段将使用当前的jQuery prop函数来获取和/或更改属性值，但也会触发两个事件，一个在属性更改之前，另一个在属性更改之后。属性名称和交替值也将被传递。

jQuery(function(){
    var _oldProp = jQuery.fn.prop;
    jQuery.fn.extend({prop: function( prop, val ) {
        // Only trigger events when property is being changed
        if ( val !== undefined ) {
            this.trigger( 'propChange', [prop, val] );     // before change listener
            var oldVal = this.prop( prop );                // Get old Value
            var ret = _oldProp.call( this, prop, val );    // Update Property
            this.trigger( 'propChanged', [prop, oldVal] ); // after change listener
            return ret;
        }
        return _oldProp.call( this, prop );
    }});
});

然后，为了捕获更改事件，您可以绑定到任一侦听器，甚至可以根据需要比较属性名称和旧值（如果挂接到before事件，则为新值）。

jQuery('input[type="checkbox"]').on('propChanged', function( event, prop, oldVal ) {
    if ( prop === 'checked' && oldVal !== jQuery(this).prop( prop ) ) {
        jQuery(this).trigger('change');
    }
});

这可以用于任何属性，也不仅限于复选框和更改事件。也可以复制上面的相同代码段以使用jQuery(el).attr(attr,val)函数。

使用prop（）检查复选框不会触发附加到＆＃34;更改＆＃34;

3 个答案:

JSBbin或Fiddle