Javascript - input(radio)物件

名稱 類形 說明
radio 物件 在Javascript中radio物件即代表<form>標籤裡的<input type="radio" />,它是一組供使用者選擇的物件,一組擁有相同name屬性值的radio群組裡,只能有一個被選中;每一項都有布林值checked屬性,當任何一項被設置為true時,其它項都會自動變為false。
checked 屬性 偵測或設置radio的選取狀態,使用布林值控制,被選中的項目會被設置為true,其它相同name屬性的項目則自動設為false。
範例1,偵測被選中的項目:
<form>
	<input type="radio" name="camera" value="Canon" />Canon<br>
	<input type="radio" name="camera" value="Nikon" />Nikon<br>
	<input type="radio" name="camera" value="Sony" />Sony<br>
	<input type="radio" name="camera" value="Olympus" />Olympus<br>
	<input type="radio" name="camera" value="Pentax" />Pentax<br>
	<input type="radio" name="camera" value="others" />others<br>
	<input type="button" name="detector" value="顯示被選中項目" />
</form>
<script>
	var form01 = document.forms[0];
	var choiceSet = form01.camera;
	var detector = form01.detector;
	
	detector.onclick = function(){
		for(var i=0;i<choiceSet.length;i++){
			if(choiceSet[i].checked){break;}
		}
		alert('被選中的項目是 '+choiceSet[i].value+' ['+i+']');
	}
</script>
範例2,將某一個項目設為選取狀態:
<form>
	<input type="radio" name="camera" value="Canon" />Canon<br>
	<input type="radio" name="camera" value="Nikon" />Nikon<br>
	<input type="radio" name="camera" value="Sony" />Sony<br>
	<input type="radio" name="camera" value="Olympus" />Olympus<br>
	<input type="radio" name="camera" value="Pentax" />Pentax<br>
	<input type="radio" name="camera" value="others" />others<br>
	<input type="button" name="manipulator" value="將Sony設為選取" />
</form>
<script>
	var form01 = document.forms[0];
	var choiceSet = form01.camera;
	var manipulator = form01.manipulator;
	
	function setChoice(num){choiceSet[num].checked = true;}
	
	manipulator.onclick = function(){
		setChoice(2);
	}
</script>
原文:Boolean property that reflects the current state of the radio button, "true" if it's checked, and "false" if not.
Example(s).
<form name="test">
<input type="radio" name="myradio" />
<input type="radio" name="myradio" checked />
<input type="radio" name="myradio" />
</form>

<script type="text/javascript">
//a variable that will hold the index number of the selected radio button
for (i=0;i<document.test.myradio.length;i++){
if (document.test.myradio[i].checked==true)
theone=i
}
</script>
defaultChecked 屬性 如果初始時是選中的則傳回true
Boolean property that reflects the value of the CHECKED attribute.
form 屬性 指向表單元素所在的<form>
References the form that contains the radio button.
name 屬性 讀取/設定表單元素name屬性的值
Sets or returns the value of the name attribute of a form element.
type 屬性 設定/讀取表單元素type屬性的值;IE8(含)以下的瀏覽器只能讀取,不支援設定屬性的功能。
A property available on all form elements, "type" returns the type of the calling form element, in this case, "radio".
value 屬性 存/取表單元素value屬性的值
A read/write string that specifies the value of the radio button (the value attribute).
onBlur 事件屬性 Code is executed when the focus is removed from the radio button.
onClick 事件屬性 Code is executed when user clicks on the radio button.
onFocus 事件屬性 Code is executed when the focus is set on the radio button.
blur() 方法 使焦點離開某個元素
Removes focus away from the radio button.
click() 方法 模擬使用者按一下該元素
Simulates a user clicking on the radio button.
focus() 方法 聚焦到某個元素上
Sets focus on the radio button.