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 相关文章推荐
lib.utf.js
Aug 21 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
JQuery中$之选择器用法介绍
Apr 05 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
什么是SOLID
Mar 24 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/09 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
Prototype Number对象 学习
2009/07/19 Javascript
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
vue如何搭建多页面多系统应用
2020/06/17 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
Python简易版停车管理系统
2019/08/12 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
12岁生日感言
2014/01/21 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
应届毕业生求职信范文
2014/07/07 职场文书