关于 checkbox 状态变化监听的问题

2019-11-05 09:45:57 +08:00
 piaochen0

表单中有一个 checkbox,id 为 cb_test 监听代码如下:
'''
$('#cb_test').change(function() {
console.log('test change');
console.log($(this).prop("checked"));
});

$('input[data-cb-type="item"]').change(function() {
console.log('item change');
console.log($(this).prop("checked"));
});
'''
点击 checkbox,这两个监听都会触发。 但是我的需求是:在 js 代码中,修改 checkbox 的状态, $('#cb_test').prop("checked", true);
这个时候能不能触发 change 事件? 试了好久都不行。还问各位有什么方法能触发的?

5112 次点击
所在节点    JavaScript
9 条回复
yxcoder
2019-11-05 09:51:17 +08:00
trigger?抱歉我没弄懂你想表达什么
mcfog
2019-11-05 09:53:07 +08:00
怀念一下,这感觉像是十年前前端讨论的问题,jquery 还不分 attr 和 prop 做各种魔法的时候
yesterdaysun
2019-11-05 09:56:07 +08:00
google 了一阵, 没有发现背后的原理, 可能设计上 prop 就是不触发 change 事件的, 确实有点意外, 可能有别的事件对应?

不过有一些 workaround, 比如这样写, $('#cb_test').prop("checked", true).change()就可以触发 change 了

https://stackoverflow.com/questions/24410581/changing-prop-using-jquery-does-not-trigger-change-event
https://forum.jquery.com/topic/should-chk-prop-checked-true-trigger-change-event
piaochen0
2019-11-05 09:56:38 +08:00
@yxcoder 代码中修改 checkbox 的状态,如何监听 checkbox 状态发生变化。
orzorzorzorz
2019-11-05 10:15:35 +08:00
改了状态还得更新视图,可能这样才能触发。还有就是 checkbox 这类我记得不都是先找到要点击的那个元素,然后 xxx.click() 或者 xxx.trigger() 的么,你这写法我还真没见过。
piaochen0
2019-11-05 10:23:19 +08:00
@yesterdaysun 多谢,这个方案可以。
knva
2019-11-05 11:07:49 +08:00
.change()方法
maplelin
2019-11-05 11:33:35 +08:00
js 修改 checkbox 状态以前的做法都是监听的 click 事件,至于现代 UI 库都是封装过的 change 事件,跟原生的完全不是一回事
jay0726
2019-11-05 12:47:05 +08:00
$('#cb_test').prop("checked", true).change();
这个时候就能触发 change 事件了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/616325

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX