`
iswift
  • 浏览: 190012 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery实现点击单选按钮切换选中状态效果

    博客分类:
  • JS
阅读更多

实现效果:第一次点击单选按钮时选中该按钮,再次点击时取消选中该单选按钮。

 

关键就是要将单选按钮原来的值保存起来,第二次点击时。如果原来选中则取消,否则选中。

 

看代码吧,是用jQuery实现的,功能虽小。知识点不少啊。。。。。

 

 

$(document).ready(function(){
	var old = null; //用来保存原来的对象
	$("input[name='sex']").each(function(){//循环绑定事件
		if(this.checked){
			old = this; //如果当前对象选中,保存该对象
		}
		this.onclick = function(){
			if(this == old){//如果点击的对象原来是选中的,取消选中
				this.checked = false;
				old = null;
			} else{
				old = this;
			}
		}
	});
});

 

 

 

二〇一二年十一月二十七日 15:22:47

分享到:
评论

相关推荐

    jquery 单选按钮点击切换

    本文将深入探讨如何使用 jQuery 实现单选按钮的点击切换效果,这在构建用户交互丰富的 web 应用时非常常见。 首先,我们需要理解 HTML 中的单选按钮(`<input type="radio">`)及其工作原理。单选按钮通常用于提供...

    jQuery模仿单选按钮选中效果

    文章提供的代码示例展示了如何通过jQuery来实现这一效果,即在点击一个单选按钮时,添加`active`样式类,并移除同一父元素下其他单选按钮的`active`样式类。 知识点6:实际应用 文章中通过实际的网页代码段来展示...

    jQuery单选多选按钮选中美化特效.zip

    总之,“jQuery单选多选按钮选中美化特效”是一个利用jQuery和CSS3技术优化用户界面的例子,它展示了如何通过简单的代码实现复杂的效果,提高网页的互动性和美观性。开发者可以根据自己的需求进行定制,将其融入到...

    jQuery单选多选按钮样式美化代码.zip

    在这个"jQuery单选多选按钮样式美化代码.zip"压缩包中,包含了一套利用jQuery实现的单选和多选按钮的美化方案。下面我们将详细探讨这一主题。 首先,`jquery.1.10.2.min.js`是jQuery的核心库文件,版本为1.10.2,这...

    jquery实现选中单选按钮下拉伸缩效果

    在本文中,我们将深入探讨如何使用jQuery实现一个选中单选按钮后触发的下拉伸缩效果。这个功能主要用于在用户交互时动态显示或隐藏特定内容,例如在发票打印、快递单查询等场景中,可以提供更加友好的用户体验。 ...

    jQuery实现一个自定义的单选按钮radio

    综上所述,实现一个自定义的jQuery单选按钮组件涉及到HTML结构、jQuery选择和操作、CSS样式以及ECMAScript 6的语法应用。通过熟练掌握这些技能,你可以创建出符合项目需求、用户体验良好的前端组件。

    JQuery表单美化定制单选按钮与复选框美化特效

    3. **状态切换**:单选按钮和复选框有选中和未选中两种状态,我们可以使用`attr('checked')`或`removeAttr('checked')`来改变这些状态,并在状态改变时更新元素的样式。例如,当单选按钮被选中时,添加一个`.checked...

    jQuery css3开关按钮点击动画切换开关按钮特效

    CSS3的伪类如`:checked`可以用来检测复选框或单选按钮的状态,然后根据状态改变按钮的样式。 创建这样的开关按钮,我们需要以下步骤: 1. **HTML结构**:设置HTML元素,一般会使用`<input type="checkbox">`配合一...

    jQuery设置单选按钮radio选中/不可用的实例代码

    首先,单选按钮的选中和禁用状态可以通过在jQuery中使用`attr()`方法来操作。`attr()`方法用于获取或设置HTML元素的属性值。当需要禁用一个单选按钮时,可以给该按钮的`disabled`属性设置为`true`。相应的,如果要...

    单选按钮和复选框按钮

    这意味着,当用户选择了其中一个单选按钮,其他的单选按钮会自动取消选中,因为用户只能在一个组内选择一个。这种设计常用于性别选择、评级系统或者简单的Yes/No问答等场景。 复选框则不同,它是一个小矩形框,用户...

    Bootstrap单选按钮和复选框美化特效.zip

    通过监听单选按钮和复选框的“change”事件,我们可以根据当前状态切换对应的图标类。例如,当复选框被选中时,添加一个表示选中状态的图标类,反之则移除。 在"3098"这个文件中,可能包含了实现这一特性的HTML、...

    jQuery模拟IOS开关按钮代码.zip

    通过监听用户对开关按钮的操作,例如点击事件,可以改变复选框的选中状态,并同步更新视觉反馈。同时,代码可能还包含设置开关按钮是否禁用(disabled)的功能,这在某些情况下非常有用,比如当某个选项不可用时。 ...

    jQuery插件逐渐增强的单选按钮和复选框

    8. **动画效果**:在切换选中状态时,可能加入了平滑的过渡动画,提升用户体验。 9. **响应式设计**:根据不同的屏幕尺寸和设备类型,自动调整控件的布局和行为。 为了使用这个插件,你需要将jQuery库和插件的...

    CSS3自定义单选按钮美化特效.zip

    4. **动画效果**:CSS3的`transition`和`animation`属性允许我们为单选按钮的切换状态添加平滑过渡和动态效果,提升用户体验。 5. **响应式设计**:考虑到了不同设备和屏幕尺寸,CSS3的媒体查询(media queries)...

    bootstrap TreeView全选单选,定位选触发事件实例

    这通常涉及到JavaScript或者jQuery的事件监听和处理,例如`click`事件,配合`toggleClass()`或`prop()`方法来切换选中状态。 2. **父节点控制子节点**: 在树形结构中,父节点的选择状态通常会影响到其所有子节点...

    使用Jquery定时实现显示隐藏,并且自动填充,,单选判断显示隐藏文本框,小功能

    在本主题中,我们将深入探讨如何利用JQuery实现特定的UI交互功能,包括定时显示/隐藏元素、自动填充以及根据单选按钮状态判断显示隐藏文本框。 首先,我们来讲解定时显示/隐藏的实现。JQuery提供了`fadeIn()`和`...

    CSS3复选框和单选按钮美化.zip

    5. **JavaScript增强**:虽然纯CSS可以实现基本的美化,但为了增加交互性,可以结合JavaScript(如jQuery)来实现更多的功能,如点击效果、检查状态的实时更新等。 6. **无障碍性**:在进行美化时,不要忘记考虑无...

    三种取消选中单选框radio的方法

    2. jQuery方法二:创建一个隐藏的单选框,在点击按钮时,将这个隐藏的单选框的checked属性设置为true,以此实现视觉上的取消选中效果。 3. JavaScript和DOM方法:通过for循环遍历所有单选框,并将它们的checked属性...

    用vue2.0实现点击选中active其他选项互斥的效果

    首先,我们需要了解为什么无法在 Vue 2.0 中直接使用 jQuery 的方式来实现点击选中 active 其他选项互斥的效果。这是因为 Vue 2.0 不提倡进行 DOM 操作,而是推荐使用 Vue 2.0 的内置机制来实现业务逻辑。 在 Vue ...

Global site tag (gtag.js) - Google Analytics