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程序 入门者学习
Jul 09 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
vue组件实现进度条效果
Jun 06 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
微信小程序用户授权最佳实践指南
May 08 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
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
javaScript同意等待代码实现心得
2011/01/01 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
python调用cmd命令行制作刷博器
2014/01/13 Python
python实现从web抓取文档的方法
2014/09/26 Python
Python实现115网盘自动下载的方法
2014/09/30 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
日语专业推荐信
2013/11/12 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
校园元旦活动总结
2014/07/09 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
让生命充满爱观后感
2015/06/08 职场文书
经销商会议开幕词
2016/03/04 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记