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 radio(单选按钮)操作方法汇总
Apr 15 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
vue props 一次传多个值实例
Jul 22 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无限遍历目录示例
2014/02/21 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
arguments对象
2006/11/20 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
bootstrap table实例详解
2017/01/06 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
python django集成cas验证系统
2014/07/14 Python
基于python历史天气采集的分析
2019/02/14 Python
python 公共方法汇总解析
2019/09/16 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
上班打牌检讨书
2014/02/07 职场文书
银行进社区活动总结
2014/07/07 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
小学生思想品德评语
2014/12/31 职场文书
毕业设计致谢词
2015/05/14 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android