【前端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 .