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.clean使用方法及思路分析
Jan 07 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
JS实现字体背景跑马灯
Jan 06 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
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
兼容ie和firefox js关闭代码
2008/12/11 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
Python实现字典去除重复的方法示例
2017/07/31 Python
Python 加密与解密小结
2018/12/06 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python对常见数据类型的遍历解析
2019/08/27 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
python判断变量是否为列表的方法
2020/09/17 Python
pandas实现导出数据的四种方式
2020/12/13 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
Linux常见面试题
2013/03/18 面试题
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2014年实验室工作总结
2014/12/03 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
初中军训感想
2015/08/07 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python