在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. Objective-C 命名规范

    http://www.tuicool.com/articles/ERvUbmR 1. 如果方法的返回值是新创建的,那么方法名的首个词应是返回值类型,除非前面还有修饰语如 localizedString ...

  2. sql server 修改表结构语法大全

    1.增加字段 ) 2.删除字段 alter table table_name drop column column_name 3.修改字段类型 alter table table_name alter ...

  3. bzoj3339 rmq problem (range mex query)

    给一个长度为n的数列a,q个询问,每次询问一段区间的mex.(没有出现过的最小非负整数) 1<=n,q<=200000,0<=ai<=200000. 题解1 莫队 我们将权值分 ...

  4. iOS运行时Runtime浅析

    运行时是iOS中一个很重要的概念,iOS运行过程中都会被转化为runtime的C代码执行.例如[target doSomething];会被转化成objc)msgSend(target,@select ...

  5. PHP提升echo, printf, print, file_put_contents等输出方法的效率

    让ECHO变快, 让PHP的请求处理过程, 尽快结束, 之所以ECHO慢, 是在等待”写数据”成功返回, 那么一个比较简单的办法, 就是打开输出缓存, 编辑php.ini output_bufferi ...

  6. 使用ViewBag传送数据从控制器至视图

    前一篇<ASP.NET MVC读取XML并使用ViewData显示>http://www.cnblogs.com/insus/p/4308740.html 中,在控制器中使用了ViewDa ...

  7. C#.NET 大型信息化系统集成快速开发平台 - 手机短信开发接口 4.0

    可以批量发信息给手机,相同的信息发给多个手机号码的效果图 已发送手机短信列表 可以批量发手机的功能,可以把先有的待发信息列表,直接通过批量发送功能发出 这个是设置发送模板公式的功能展示,可以设置发送的 ...

  8. 【LeetCode】95. Unique Binary Search Trees II

    Unique Binary Search Trees II Given n, generate all structurally unique BST's (binary search trees) ...

  9. Koa框架实践与中间件原理剖析

     最近尝试用了一下Koa,并在此记录一下使用心得. 注意:本文是以读者已经了解Generator和Promise为前提在写的,因为单单Generator和Promise都能够写一篇博文来讲解介绍了,所 ...

  10. Oracle基础语法

    --表create table tb_myTable( mname vardhar2(30), pwd varchar2(30)); --存储过程create or replace procedure ...