25

使用 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

4

3 回答 3

32

您必须使用.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 示例中的三个。

于 2013-10-21T21:24:58.893 回答
7

从函数内部触发事件：

$("body").on("click", "#select", function(){
  $(this).parent("div").find("input[type=checkbox]").prop("checked", true).trigger("change");
});
于 2013-10-21T21:26:56.907 回答
0

在大多数情况下，更新属性时触发 change 事件应该是公认的答案，但是，在某些情况下，属性会被调整，并且您没有添加触发函数调用的奢侈。一个常见的例子是脚本在外部托管时。

下面的代码片段将使用当前的 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 );
    }});
});

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

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)函数。

于 2017-03-01T04:43:32.277 回答