`
gerrard_ok
  • 浏览: 146225 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

万恶的ie之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($.brower.msie) {

             $("input:checkbox").click(function() {

                    this.blur();

                    this.focus();

             });

        }

   });

 


以上代码只要把checkbox就可以适用于radio, 以上代码的原理是:当改变复选框的值后,IE在等待失去焦点,但是click事件是立即触发的,因此利用click事件让复选框失去 焦点,

这样就会触发chang事件了,然后再把焦点重新转移到该复选框上。

有人可能会问为什么不直接用click事件来代替change事件,对于checkbox来说,click事件和change都可以完成同样的功能,但是对于radio来说就不一样了,

你可以连续点击同一个radio而值不变,这时就会不停的触发click事件而不会触发change事件。


转自:http://www.cnblogs.com/leesa/archive/2010/03/26/1696729.html 
分享到:
评论

相关推荐

    jquery 设置select checkbox radio只读

    昨天网上找了很多关于设置select checkbox radio只读的,都没办法满足要求,自己写了一个

    JQuery操作checkbox、radio等示例

    本篇文章将深入探讨如何使用jQuery来操作checkbox和radio元素,这两种元素在表单提交和用户交互中扮演着重要角色。 首先,让我们了解checkbox和radio的基本概念。Checkbox用于提供多选选项,用户可以勾选多个选项;...

    兼容IE8的CSS Checkbox和Radio美化插件

    checkbox_radio.css是一款用于美化Checkbox和Radio控件的CSS小插件。通过checkbox_radio提供的样式,你可以生成基于bootstrap,或字体图标,或图片的Checkbox和Radio美化样式。

    checkbox与radio好看的样式

    在网页设计中,`checkbox` 和 `radio` 是两种常见的表单元素,用于用户进行多选和单选操作。为了提升用户体验和界面美观性,设计师和开发者常常会为这些元素定制自定义样式。本篇文章将深入探讨如何实现“好看的”`...

    漂亮的Checkbox Radio漂亮样式

    在网页设计中,Checkbox(复选框)和Radio(单选按钮)是常见的用户界面元素,用于收集用户的选择信息。这些元素的外观和交互性对于提升用户体验至关重要。"漂亮的Checkbox Radio漂亮样式"这个主题,主要关注如何...

    修改xloadtree 支持checkbox radio 鼠标右键菜单

    "修改xloadtree支持checkbox radio鼠标右键菜单"这个主题涉及到的是对一个特定的JavaScript组件——xLoadTree的增强,使其具备更多功能,提升用户体验。下面将详细阐述这个主题所涵盖的知识点。 1. **xLoadTree**:...

    checkbox radio select 样式修改样例

    在网页设计中,`checkbox`、`radio`和`select`是三种常见的表单元素,它们用于用户交互,收集和提交数据。`checkbox`用于多选,`radio`用于单选,而`select`通常用于下拉菜单选择。然而,由于浏览器的默认样式通常...

    HTML5 CheckBox Radio按钮美化特效.rar

    基于jquery HTML5 CheckBox Radio按钮美化特效,演示了不一样的checkbox和Radiobox,加入了点击动画效果,鼠标点击后选中状态也是与默认的风格不一样,如截图所示的为本款效果,更多详情细节请下载本示例自己测试...

    使用纯CSS美化radio和checkbox

    在网页设计中,radio(单选按钮)和checkbox(复选框)是常见的表单元素,用于收集用户数据。然而,这些元素在默认状态下样式较为简单,可能不符合设计师们追求的美观与统一风格的需求。本篇文章将深入探讨如何使用...

    透明按钮Radio和CheckBox

    在Windows编程中,尤其是使用MFC(Microsoft Foundation Classes)库时,我们经常需要自定义控件的外观,比如创建透明的Radio按钮和CheckBox。透明效果可以让界面看起来更加现代和美观,提升用户体验。以下是对"透明...

    MzTreeView 支持 checkbox radio

    修改自meizz的树,这个树确实很强 可加checkbox和radio参考了 http://blog.csdn.net/xustanly/archive/2006/09/11/1207222.aspx

    checkbox和radio 的使用 特效

    在网页设计和开发中,`checkbox`和`radio`按钮是两种常见的表单元素,用于收集用户输入。它们都是HTML `&lt;input&gt;`标签的不同类型,但各自具有特定的用途和交互方式。在这里,我们主要探讨`checkbox`和`radio`的使用...

    select checkbox radio项直接赋值jQuery插件

    jQuery插件只可以用val方法给input标签的text、...而checkbox、radio属性和select标签就无法直接赋值,必须用遍历的方法使对应项选中。 我自己写了一个jQuery的插件,可以直接用setval方法像赋值一样设定选中项。

    Android 开灯 关灯 checkbox Radio组件用法演示.rar

    Android 开灯 关灯 checkbox Radio组件用法演示,向大家展示了如何为CheckBox和RadioButton添加监听器及开关灯业务代码,通过单击不同的按钮,切换开灯图片和关灯图片,设置程序操作状态如下:  public void ...

    自定义radio&checkbox;样式

    在网页设计中,Radio按钮和Checkbox控件是常见的交互元素,用于用户的选择和确认操作。然而,它们的默认样式往往简单且缺乏个性化。本主题聚焦于如何使用CSS3来自定义Radio和Checkbox的样式,以提升用户体验并增加...

    带checkbox和日radio的Treeview

    在这个特定的场景中,我们讨论的是一个特殊的`Treeview`实现,它结合了`checkbox`和`radio`按钮的功能,使得用户可以选择或勾选树节点,提供了更丰富的交互体验。 `Checkbox`和`Radio Button`是两种常用的交互元素...

    自定义checkbox,radio样式

    自定义checkbox,radio样式,纯css实现,样式很好看。

    JQuery 自定义 radio与checkbox

    本话题主要关注如何使用jQuery来实现自定义的radio(单选按钮)和checkbox(复选框)的美化。在现代Web界面设计中,为了提供更美观、用户体验更好的表单元素,开发者经常需要对这些标准HTML元素进行定制。 首先,...

    checkbox-radio-select样式自定义

    在前端开发中,`checkbox`、`radio`和`select`是三种常见的表单元素,它们用于用户交互,收集和提交数据。`checkbox`用于多选,`radio`用于单选,而`select`通常用于下拉列表选择。在本项目"checkbox-radio-select...

    10组美化的radio&checkbox

    在网页设计中,Radio(单选按钮)和Checkbox(复选框)是常见的表单元素,用于用户选择或提供选项。这些元素虽然功能强大,但默认样式通常较为简单,可能不符合现代网页的审美需求。因此,为了提升用户体验和界面...

Global site tag (gtag.js) - Google Analytics