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