JQuery触发radio或checkbox的change事件
更新时间：2012年12月18日 14:57:11 作者：
在JQuery中，当给radio或checkbox添加一个change事件时，如果它的值发生变化就会触发change事件;本文将详细介绍如何利用JQuery触发Checkbox的change事件需要了解的朋友可以参考下
早上要做一功能，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事件。
初始代码如下：
复制代码 代码如下:
$(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事件。
相关文章
这篇文章主要介绍了基于jquery实现省市联动效果，感兴趣的小伙伴们可以参考一下2015-11-11
前几天看到事件委托的时候，关于live()方法讲的不是很详细，就去搜了一下关于live()和delegate()的，最后看源码发现bind()和delegate()都是由on()实现的，感兴趣的朋友可以了解下，或许本文对你有所帮助2013-02-02
这篇文章主要介绍了jQuery实现模糊搜索功能的方法,结合实例形式总结分析了jQuery关键字搜索、模糊查询、动态删除table数据等相关操作技巧,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了jQuery实现文本框邮箱输入自动补全效果，大家无需输入完全部邮箱信息，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了jQuery实现图片简单轮播功能,结合实例形式分析了jQuery基于定时器与事件响应的页面元素属性动态操作实现图片轮播功能相关操作技巧,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了jQuery实现时尚漂亮的弹出式对话框,可实现非常炫目时尚的弹出式对话框功能,非常具有实用价值,需要的朋友可以参考下2015-08-08
下面小编就为大家带来一篇JQuery解析XML数据的几个简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
今天在工作中需要用到jQuery组件里面的TomBox，可是发现以往做的Tombox失效了2010-06-06
今天共享一些令人振奋的UI教程，这些UI大部分是基于Jquery的插件，主要包括动态切换视图的相册、3D旋转分享按钮、Facebook admin Panel，下滑效果的导航Menu，滑翔购物车功能，漂亮的Form表单元素等等。2010-09-09
这篇文章主要介绍了jQuery实现的自动加载页面功能,结合简单实例形式分析了jQuery针对页面元素的动态加载与属性操作相关技巧,需要的朋友可以参考下2016-09-09
最新评论