【前端JS】radio 可單選可點擊取消選中

普通情況下 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 .