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 ajax服务器端与客户端通信的代码
Mar 28 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 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 header函数分析详解
2011/08/06 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
Python 命令行非阻塞输入的小例子
2013/09/27 Python
详解Django中Request对象的相关用法
2015/07/17 Python
Python中的id()函数指的什么
2017/10/17 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
python程序变成软件的实操方法
2019/06/24 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
python redis存入字典序列化存储教程
2020/07/16 Python
pymysql模块使用简介与示例
2020/11/17 Python
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
经贸专业毕业生求职信
2014/03/23 职场文书
培训班主持词
2014/03/28 职场文书
员工工作自我评价
2014/09/26 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
V Rising 服务器搭建图文教程
2022/06/16 Servers