【前端JS】radio 可单选可点击取消选中

最新推荐文章于 2024-05-09 11:50:47 发布

weixin_33980459

最新推荐文章于 2024-05-09 11:50:47 发布

阅读量840

点赞数

文章标签：前端 javascript ViewUI

普通情况下 radio 单选框仅仅能实现多选一的效果，可是一旦选择当中一个后，这个单选框就不可点击取消其选中状态了。这样的功能在某些业务环境下并不适用。有时我们既须要单选框的多选一效果。也须要复选框的可点击取消效果。为此本文提供一种 JQuery 写法。

			/*
				1. 取消与当前控件name 相同的全部控件的选中状态
				2. 选中当前控件
				3. 假设当前控件在点击前是选中状态，则点击后取消其选中状态
			*/
			$("input:radio").click(function(){
				var domName = $(this).attr('name');//获取当前单选框控件name 属性值 
				var checkedState = $(this).attr('checked');//记录当前选中状态
				$("input:radio[name='" + domName + "']").attr('checked',false);//1.
				$(this).attr('checked',true);//2.
				if(checkedState == 'checked'){
					$(this).attr('checked',false); //3.
				}
			});

这里把 radio 换成 checkbox 也能得到相同效果。

在前文所设的需求下，我们仅仅须要取到 0 个或 1 个值。因此为取值方便考虑，本文推荐使用 radio 。

End .