JQuery触发radio或checkbox的change事件


Posted in Javascript onDecember 18, 2012

早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层。
初始代码如下:

$(function(){ 
$("#ischange").change(function() { 
alert("checked"); 
}); 
});

捣腾了半天,竟然一点反应都没有。百度了下,有高人指出上面几行代码在Firefox等浏览器中可以正常运行,即你选中复选框或取消复选框都会弹出一个对话框,但是在IE中却不会正常执行,即选中或取消复选框不会立即弹出对话框。

必须在选中或取消复选框之后再点击除了复选框之外的任何一个地方,据说是因为IE会等到复选框失去焦点之后才会触发change事件。
改进之后的代码如下:

$(function(){ 
if ($.browser.msie) { 
$('input:checkbox').click(function () { 
this.blur(); 
this.focus(); 
}); 
}; 
$("#ischange").change(function() { 
alert("checked"); 
}); 
});

补充:当改变复选框的值后,IE在等待失去焦点,但是click事件是立即触发的,因此利用click事件让复选框失去焦点,这样就会触发chang事件了,然后再把焦点重新转移到该复选框上。
如果是radio,将checkbox换成radio即可。

在JQuery中,当给radio或checkbox添加一个change事件时,如果它的值发生变化就会触发change事件,就如同我们在 HTML中写入下代码:

<input type="checkbxo" id="testCheckbox" onchange="myfunction()"name="fruits">,

而我们用JQuery的代码如下:
$(document).ready(function(){ 
$("testCheckbox").change(function() { 
alert("Option changed!"); 
}); 
});

以上代码在Firefox等浏览器中可以正常运行,即当你选中复选框或取消复选框都会弹出一个对话框,但是在IE中却不会正常执行,即你选中或取消复选框不会立即弹出对话框,你必须在选中或取消复选框之后再点击除了复选框之外的任何一个地方,之所以这样,据说是因为IE会等到复选框失去焦点之后才会触发change事件,目前这个问题还没有被修复,不过网上有高人已经提供了解决方案:
$(function () {if ($.browser.msie) {$('input:checkbox').click(function () { this.blur(); this.focus(); }); }});

以上代码只要把checkbox就可以适用于radio, 以上代码的原理是:当改变复选框的值后,IE在等待失去焦点,但是click事件是立即触发的,因此利用click事件让复选框失去 焦点,这样就会触发chang事件了,然后再把焦点重新转移到该复选框上。有人可能会问为什么不直接用click事件来代替change事件,对于checkbox来说,click事件和change都可以完成同样的功能,但是对于radio来说就不一样了,你可以连续点击同一个radio而值不变,这时就会不停的触发click事件而不会触发change事件。
Javascript 相关文章推荐
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
JS实现标签页切换效果
May 04 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
Jquery为单选框checkbox绑定单击click事件
Dec 18 #Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 #Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 #Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 #Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 #Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 #Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 #Javascript
You might like
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
JQuery 入门实例1
2009/06/25 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
Python中sort和sorted函数代码解析
2018/01/25 Python
Python操作json的方法实例分析
2018/12/06 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
如何强制垃圾回收
2015/10/06 面试题
应届大学生求职信
2013/12/01 职场文书
中英文自我评价常用句型
2013/12/19 职场文书
益达广告词
2014/03/14 职场文书
课外科技活动总结
2014/08/27 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
财务经理岗位职责
2015/01/31 职场文书
实习生辞职信范文
2015/03/02 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
担保书范文
2019/07/09 职场文书