失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 用js代码修改checkbox的checked属性值不会触发onchange事件

用js代码修改checkbox的checked属性值不会触发onchange事件

时间:2022-09-02 11:00:29

相关推荐

用js代码修改checkbox的checked属性值不会触发onchange事件

问题描述

vue中,我用v-model将 checkbox 绑定到变量flag上,但是,当我用 js 去修改 flag 的值时,却没有触发 checkbox 的 v-on:change事件。同样的,在angular中用ng-model将 checkbox 绑定到变量flag2上,用程序修改flag2的值也没有触发 checkbox 的ng-change事件。

事实上,这不是vue和angular的问题,而是在原生的js和html上。

解决方法

在vue及angular框架中我们可以通过watch监听绑定的变量的值的变化来实现change事件要捕获的事件处理。分别在以下两处都添加处理方法代码:

(1) onchange事件中处理用户界面的操作;

(2) 代码修改checkbox的checked属性值的时候后面直接添加处理方法。

结论

用 js代码去修改 checkbox 的 checked 属性值不会触发change或click事件;用 js代码去修改text的value值,不会触发change事件。

以上需要我们特别注意。

补充知识

测试了下,用户界面操作会触发,用 js 修改以下相关控件的checked、value值不会触发以下相关事件:

selectonchangeinput[type="checkbox"]onchangeinput[type="text"]onchange

我猜测可能HTML在设计之初已考虑到了防止代码加载数据到表单时可能出现事件连锁触发反应(这也算是好的方面吧),完全放开由程序实现时去考虑是否需要调用和触发。

如果觉得《用js代码修改checkbox的checked属性值不会触发onchange事件》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。