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 动态添加表格行 使用模板、标记
Oct 24 Javascript
为javascript添加String.Format方法
Aug 11 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
JavaScript闭包的简单应用
Sep 01 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
PHP数组实例详解
2016/06/26 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
JS控件的生命周期介绍
2012/10/22 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
JS实现轮播图效果
2020/01/11 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
学生感冒英文请假条
2014/02/04 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
中学生逃课检讨书
2015/02/17 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
导游词之青城山景区
2019/09/27 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android