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横向擦除焦点图特效代码分享
Sep 06 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
基于vue.js实现购物车
Jan 15 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
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
类似框架的js代码
2006/11/09 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
使用Python设计一个代码统计工具
2018/04/04 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
使用Python发现隐藏的wifi
2020/03/04 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
网上蛋糕店创业计划书
2014/01/24 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
见习报告的格式
2014/11/04 职场文书