关于JQ对checkbox的click事件触发的一个坑

今天插件里的遇到一个坑困扰我很久,写了一个键盘事件触发input的click事件来改变选项值,一直不正确,测试了好久终于发先问题出在input点击时改变checked和执行click事件的顺序上。写一个小demo。分别用jq和js来使cs2/cs4来分别触发cs1/cs3的click事件。

html:写两个多选框

<input id="cs1" value="1"  type="checkbox">
<input id="cs2" value="2"  type="checkbox">

<input id="cs3" value="3"  type="checkbox">
<input id="cs4" value="4"  type="checkbox">

初始状态:


1,2用jQ写法

$("#cs1").click(function(){
    alert(this.checked);

});

$("#cs2").click(function(){
    $("#cs1").click();//或者$("#cs1").trigger('click');

});

3,4用原生的方法来绑定结果就不一样了

document.getElementById('cs3').onclick = function ( ) {   alert(this.checked) }
document.getElementById('cs4').οnclick=function(){ document.getElementById('cs3').click()  };


分别点击cs1,和cs3显示结果为均true,点击确定后cs1,cs3的状态均为选中,这个JQ和js没区别


然后刷新页面,再来点击cs2 和cs4看看

jq的是先执行函数将cs1的checked属性弹出啊,点击确定关闭弹窗后cs1的状态才变为被选中,而js写法的的依然是先变为选中的状态再执行弹窗函数。

这个实验表明,jq中使用事件触发中获取的checked值是不准确的。通过click()和trigger方法来触发的事件顺序都是先执行绑定的事件在实现原生选中的效果

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值