JQuery触发radio或checkbox的change事件

210 阅读 0 评论 139 点赞

我是靠谱客的博主温暖铃铛，最近开发中收集的这篇文章主要介绍JQuery触发radio或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事件。