如何更改 prop checked 并触发同一输入的 onchange 事件?
How to change prop checked and trigg the onchange event of the same input?
我有类似的东西
<input id="chk1" type="checkbox" onchange="alert('HELLO!')"/>
并且在其他地方,其他事件执行 $('#ck1').prop('checked',false)
,但是,它不会触发 onchange 事件(!),也就是说,不会执行 alert()
。
注意 1:这是关于 jQuery 概念或工具的问题,不完全是 "how to"... 因为,严格按照上面的设置,我们可以说 "change your code!",对某事喜欢 <input id="chk1" type="checkbox" onchange="doAlert()"/>
并做一个序列,$('#ck1').prop('checked',false); doAlert();
。
NOTE2(在@ArturFilipiak 删除第一个好的答案后编辑):$('#ck1').prop('checked',false).trigger('change')
的使用产生了副作用,它触发了两次......我稍后会用原始的更简单的东西构建一个 jsfiddle big/complex 代码...(编辑:两次是我的大代码的副作用!)。
所以:,但主要贡献来自@ArturFilipiak,他们我接受了他的回答。
您可以使用 jQuery
复选框 change
事件。
$("#chk1").change(function(){
alert($(this).is(":checked"));
});
[编辑](与复选框混淆的收音机)
在脚本中设置 .prop()
(或任何其他 property/attribute)不会触发该元素上的任何事件。
您可以使用 .trigger()
手动触发事件处理程序。
请注意,它不会调用事件本身,而是调用附加到此事件的处理程序,并且不会依赖于实际的 :checked
状态。因此,您必须有条件地触发处理程序(检查实际 :checked
状态是否与所需状态不同)
Any event handlers attached with .on()
or one of its shortcut methods are triggered when the corresponding event occurs. They can be fired manually, however, with the .trigger()
method. A call to .trigger()
executes the handlers in the same order they would be if the event were triggered naturally by the user.
使用您的 onchange
属性:
<input id="chk1" type="checkbox" onchange="alert('HELLO!')"/>
someFunction(){
// trigger onchange only if the checkbox is actually checked:
!$('#chk1').is(':checked') || $('#chk1').prop('checked',false).trigger('onchange');
}
someFunction();
或在jQuery中设置.change()
:
$('#ck1').change(function(){
alert('HELLO!');
});
someFunction(){
// trigger change only if the checkbox is actually checked:
!$('#chk1').is(':checked') || $('#chk1').prop('checked',false).trigger('change');
}
someFunction();
您可以使用 .when 检查您的 属性 设置是否完成。
http://api.jquery.com/jquery.when/
例如
$.when($('#ck1').prop('checked',false)).done(function( x ) {
// callback
doAlert();
});
但我更喜欢你使用 jquery .. 尽你所能 jquery 因为它会给你更有效的工具
对不起大家,请参阅有关我的问题的评论,以简化和表达问题中的完整示例。
这是问题和解决方案(!):http://jsfiddle.net/7z0q9vvu/1/
jQuery 有问题(错误?)
$('#chk1').prop('checked',newVal)
的改变不会触发 onChange 事件。
...解决方法(或有效解决方案)
$('#chk1').prop('checked',false).trigger('change');
注意
那是我的另一个问题:作为您使用 .trigger('change')
的上下文,您可以使 onChange 事件发生两次 (!)。
我有类似的东西
<input id="chk1" type="checkbox" onchange="alert('HELLO!')"/>
并且在其他地方,其他事件执行 $('#ck1').prop('checked',false)
,但是,它不会触发 onchange 事件(!),也就是说,不会执行 alert()
。
注意 1:这是关于 jQuery 概念或工具的问题,不完全是 "how to"... 因为,严格按照上面的设置,我们可以说 "change your code!",对某事喜欢 <input id="chk1" type="checkbox" onchange="doAlert()"/>
并做一个序列,$('#ck1').prop('checked',false); doAlert();
。
NOTE2(在@ArturFilipiak 删除第一个好的答案后编辑):$('#ck1').prop('checked',false).trigger('change')
的使用产生了副作用,它触发了两次......我稍后会用原始的更简单的东西构建一个 jsfiddle big/complex 代码...(编辑:两次是我的大代码的副作用!)。
所以:
您可以使用 jQuery
复选框 change
事件。
$("#chk1").change(function(){
alert($(this).is(":checked"));
});
[编辑](与复选框混淆的收音机)
在脚本中设置 .prop()
(或任何其他 property/attribute)不会触发该元素上的任何事件。
您可以使用 .trigger()
手动触发事件处理程序。
请注意,它不会调用事件本身,而是调用附加到此事件的处理程序,并且不会依赖于实际的 :checked
状态。因此,您必须有条件地触发处理程序(检查实际 :checked
状态是否与所需状态不同)
Any event handlers attached with
.on()
or one of its shortcut methods are triggered when the corresponding event occurs. They can be fired manually, however, with the.trigger()
method. A call to.trigger()
executes the handlers in the same order they would be if the event were triggered naturally by the user.
使用您的 onchange
属性:
<input id="chk1" type="checkbox" onchange="alert('HELLO!')"/>
someFunction(){
// trigger onchange only if the checkbox is actually checked:
!$('#chk1').is(':checked') || $('#chk1').prop('checked',false).trigger('onchange');
}
someFunction();
或在jQuery中设置.change()
:
$('#ck1').change(function(){
alert('HELLO!');
});
someFunction(){
// trigger change only if the checkbox is actually checked:
!$('#chk1').is(':checked') || $('#chk1').prop('checked',false).trigger('change');
}
someFunction();
您可以使用 .when 检查您的 属性 设置是否完成。
http://api.jquery.com/jquery.when/
例如
$.when($('#ck1').prop('checked',false)).done(function( x ) {
// callback
doAlert();
});
但我更喜欢你使用 jquery .. 尽你所能 jquery 因为它会给你更有效的工具
对不起大家,请参阅有关我的问题的评论,以简化和表达问题中的完整示例。
这是问题和解决方案(!):http://jsfiddle.net/7z0q9vvu/1/
jQuery 有问题(错误?)
$('#chk1').prop('checked',newVal)
的改变不会触发 onChange 事件。
...解决方法(或有效解决方案)
$('#chk1').prop('checked',false).trigger('change');
注意
那是我的另一个问题:作为您使用 .trigger('change')
的上下文,您可以使 onChange 事件发生两次 (!)。