今天插件里的遇到一个坑困扰我很久,写了一个键盘事件触发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写法
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方法来触发的事件顺序都是先执行绑定的事件在实现原生选中的效果