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 1.5最新版本的改进细节分析
Jan 19 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
微信小程序 图片宽高自适应详解
May 11 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
javascript中的with语句学习笔记及用法
Feb 17 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 调用远程url的六种方法小结
2009/11/02 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
PHP实现验证码校验功能
2017/11/16 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
Python 含参构造函数实例详解
2017/05/25 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
Python设计密码强度校验程序
2020/07/30 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
应届生程序员求职信
2013/11/05 职场文书
教育专业个人求职信
2013/12/02 职场文书
计算机专业毕业生求职信分享
2013/12/24 职场文书
经济管理专业自荐信
2013/12/30 职场文书
交通事故检查书范文
2014/01/30 职场文书
教师业务培训方案
2014/05/01 职场文书
小学运动会开幕词
2015/01/28 职场文书
学校标语口号大全
2015/12/26 职场文书
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫