JQuery触发radio或checkbox的change事件_jquery

早上要做一功能,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事件。

时间: 2024-09-18 13:42:34

JQuery触发radio或checkbox的change事件_jquery的相关文章

Struts2的s:radio标签使用及用jquery添加change事件_jquery

struts2中s:radio标签的使用总结 遇到的问题:在使用该标签时,设置了默认选中项,但提交数据返回后,单选框不能显示之前选中的项,仍然为默认选项 通过测试得出以下结论: 以<s:radio name="user.sex" list="%{#{'1':'男','0':'女'}}" theme="simple"></s:radio>为例 在使用s:radio标签的时候,如果要使该标签默认选中一项,可以通过两种方法 1.

不同的jQuery API来处理不同的浏览器事件_jquery

在今天的网络浏览器处理事件是有点困难的一部分,不同的浏览器以不同的方式处理事件.因此,要克服这些跨浏览器的问题,人们可以利用jQuery的事件处理API. jQuery是一个小的JavaScript库,提供了广大的API来处理不同的浏览器事件和效果和更大量.阅读更多有关处理使用JavaScript浏览器的用户界面效果.在本教程中,我们将探讨不同的API jQuery来处理不同的浏览器事件. Page Load事件 就绪(FN), 这是所有类型的事件,jQuery的支持的基础上.你可能想设置形式的

jQuery获取radio选中项的值实例_jquery

<title></title> <script src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function () { //没有默认选中的情况 //先判断radio是否有选中项,再获取选中的值 $("#btnclick").click(function () { //获取选中项的valu

浅谈jquery设置和获得checkbox选中的问题_jquery

1. 设置checkbox选中: //选中多选框 checkbox=$("#agentinfo input[name='veri[]']"); //循环多选框中的值 checkbox.each(function(){ for(var j=0;j<data.veri.length;j++){ //判断当前值是否在数组中 if($(this).val() == data.veri[j]){ $(this).attr('checked','checked');//选中 } } });

jQuery中radio和checkbox的选中的另一种方式

<head>     <title></title>     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>     <script type="text/javascript">         $(function () {             $("input[n

JQuery最佳实践之精妙的自定义事件_jquery

恰好偶最近负责的一个可视化编辑器的开发,其中有些地方便应用了JQuery的自定义事件,而且达到了很好的效果-精简代码的同时充分利用了OO的原则. 本文以我实际应用开发过程中遇到的一个例子进一步说明"什么时候用JQuery的自定义事件以及怎么用",希望可以抛砖引玉,同时权且当是回复同学们的邮件了. Demo-Ingenious JQuery custom event JQuery最佳实践-精妙的自定义事件 问题:一个复选框X,你如何便捷地触发它的click事件的处理逻辑,但是又不改变它当

jquery模拟实现鼠标指针停止运动事件_jquery

本文实例讲解了鼠标指针停止运动触发事件实例代码,分享给大家供大家参考,具体内容如下 在js中有有内置的鼠标各种事件,比如click事件,mousemove事件等等,但是并没有鼠标指针停止运动这个事件,下面就利用jquery模拟实现此效果,希望能够给需要的朋友带来一定的帮助. 代码如下: <html> <head> <meta charset="gb2312"> <title>鼠标指针停止运动</title> <style

jQuery 判断元素上是否绑定了事件_jquery

我研究了一下之后发现,jQuery都将事件缓存起来了,其实也是为了防止内存溢出以及页面unload的时候的速度,也包括多函数触发,方便管理等诸多好处,具体可以参考此文. jQuery会在window.unload的时候卸载所有绑定过的事件,释放内存的. OK,言归正传.判断元素上是否绑定过事件用如下语句 复制代码 代码如下: jQuery.data(elem,"events")[type] //老版本也能用 $(elem).data("events")[type]

jQuery操作 input type=checkbox的实现代码_jquery

复制代码 代码如下: <input type="checkbox">: 2012欧洲杯"死亡之组"小组出线的国家队是:<br> <input type="checkbox" name="nation" value="Germany">德国 <input type="checkbox" name="nation" value=&