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

最新推荐文章于 2022-06-30 22:28:35 发布

原创最新推荐文章于 2022-06-30 22:28:35 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#单选按钮选中状态切换 #radio选中状态切换 #选中单选按钮

JS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用jQuery实现单选按钮点击切换选中状态的方法。通过保存已选中的按钮，在再次点击时能够取消选中，实现了单选按钮的行为自定义。

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

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

看代码吧，是用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