在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事件。

 

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

  1. JQuery Checkbox的change事件

    JQuery   Checkbox的change事件  参考 http://blog.csdn.net/hbhgjiangkun/article/details/8126981   $(functio ...

  2. jquery的radio和checkbox的标签的操作集合

    jquery的radio和checkbox的标签的操作集合: $("input[name='radio_name'][checked]").val(); //选择被选中Radio的 ...

  3. jquery选中radio或checkbox的正确姿势

    jquery选中radio或checkbox的正确姿势 Intro 前几天突然遇到一个问题,没有任何征兆的..,jquery 选中radio button单选框时,一直没有办法选中,后来查了许多资料, ...

  4. jquery对radio和checkbox的操作

    jQuery获取Radio选择的Value值 代码  $("input[name='radio_name'][checked]").val(); //选择被选中Radio的Valu ...

  5. radio与checkbox的选中事件

    <一>判断checkbox的选中事件 var result=$(this).find("input[type='checkbox']").prop("chec ...

  6. jquery实用应用之jquery操作radio、checkbox、select

    本文收集一些jquery的实用技巧,非常实用的哦,其中对radio.checkbox.select选中与取值的方法. 获取一组radio被选中项的值var item = $('input[@name= ...

  7. [转]jQuery操作radio、checkbox、select 集合.

    1.radio:单选框 html代码 <input type="radio" name="radio" id="radio1" val ...

  8. jQuery操作radio、checkbox、select 集合

    1.radio:单选框 HTML代码: <input type="radio" name="radio" id="radio1" va ...

  9. jQuery操作radio、checkbox、select总结

    1.radio:单选框 HTML代码: <input type="radio" name="radio" id="radio1" va ...

随机推荐

  1. hibernate之关联映射

    No.1 映射一对多双向关联关系: 当类与类之间建立了关联,就可以方便的从一个对象导航到另一个或另一组与它关联的对象. 步骤一: 注意:hibernate要求在持久化类中定义集合类属性时,必须把属性类 ...

  2. 使用exp进行SQL报错注入

    0x01 前言概述 好消息好消息-作者又在MySQL中发现了一个Double型数据溢出.如果你想了解利用溢出来注出数据,你可以读一下作者之前发的博文:BIGINT Overflow Error bas ...

  3. android java.io.IOException: open failed: EBUSY (Device or resource busy)

    今天遇到一个奇怪的问题, 测试在程序的下载界面,下载一个文件第一次下载成功,删除后再下载结果下载报错, 程序:file.createNewFile(); 报错:java.io.IOException: ...

  4. HTML 学习笔记 CSS3(过度 transition)

    通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.请把鼠标移动到下面的元素上: 先看一下这个代码 实现旋转放大的效 ...

  5. iOS UIControl 详解

    UIControl是UIView的子类,当然也是UIResponder的子类.UIControl是诸如UIButton,UISwitch,UItextField等控件的父类,它本身包含了一些属性和方法 ...

  6. C# winform生成天气预报(转)

    原文地址 http://www.cnblogs.com/ChowYy/p/3382216.html?utm_source=tuicool&utm_medium=referral 项目需要,然后 ...

  7. 解决 docker on windows下网络不通

    问题:公司有一台闭置的windows服务器,于是想利用起来,但是在启动容器后始终无法通信成功. 研究: 1. 发现安装包中包含virtualbox, 于是怀疑windows下的docker是在virt ...

  8. LeetCode:Minimum Depth of Binary Tree,Maximum Depth of Binary Tree

    LeetCode:Minimum Depth of Binary Tree Given a binary tree, find its minimum depth. The minimum depth ...

  9. .net破解二(修改dll)

    多谢大家支持! 昨天说了一下反编译与剥壳(.net破解一(反编译,反混淆-剥壳,工具推荐)),今天就来修改修改dll,为了方便,我自己写一个简单程序用来测试 代码如下: 一个 ConsoleAppli ...

  10. Spark源码在Eclipse中部署/编译/运行

    (1)下载Spark源码 到官方网站下载:Openfire.Spark.Smack,其中Spark只能使用SVN下载,源码的文件夹分别对应Openfire.Spark和Smack. 直接下载Openf ...