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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
图解javascript作用域链
May 27 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
解决Vue watch里调用方法的坑
Nov 07 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 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
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
理解JavaScript的prototype属性
2012/02/11 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
深入浅析Vue中的Prop
2018/06/10 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
element实现合并单元格通用方法
2019/11/13 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
Python 异常处理的实例详解
2017/09/11 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
浅析python标准库中的glob
2020/03/13 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
指针和引用有什么区别
2013/01/13 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
初三家长会邀请函
2014/01/18 职场文书
美术教学感言
2014/02/22 职场文书
毕业生个人自荐书
2015/03/05 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
2016年情人节问候语
2015/11/11 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript