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 相关文章推荐
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
js实现简单商品筛选功能
Feb 02 Javascript
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
支持oicq头像的留言簿(一)
2006/10/09 PHP
php实现水仙花数示例分享
2014/04/03 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
python生成密码字典的方法
2018/07/06 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
python实现人工蜂群算法
2020/09/18 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
英语专业毕业生求职信
2014/05/24 职场文书
商业街策划方案
2014/05/31 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
MySQL创建表操作命令分享
2022/03/25 MySQL
Python实现双向链表基本操作
2022/05/25 Python