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 DOM插入节点操作指南
Mar 03 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 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
PHP代码审核的详细介绍
2013/06/13 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
php的4种常用运行方式详解
2016/12/22 PHP
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
Python实现购物程序思路及代码
2017/07/24 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
毕业生就业自荐书
2013/12/15 职场文书
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
市场专员岗位职责
2014/02/14 职场文书
小学老师寄语大全
2014/04/04 职场文书
单位消防安全责任书
2014/07/23 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
群众路线专项整治方案
2014/10/27 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
政协委员个人总结
2015/03/03 职场文书