Javascript - input(checkbox)物件

名稱 類形 說明
checkbox 屬性 在Javascript中check物件即代表<form>標籤裡的<input type="radio" />,它是一組供使用者以勾選的方式輸入資訊的物件,可以在一組擁有相同name屬性值的checkbox群組裡做選取,和radio不同,checkbox可以複選;每一項都有布林值checked屬性,被選中為true,沒有被選中則為false。
accessKey 屬性 String value that sets/ returns the accessKey for the checkbox.
checked 屬性 偵測或設置checkbox的選取狀態,使用布林值控制,被選中的項目會被設置為true,未選中的則為false。
範例1,控制checkbox的選取狀態:
<form>
	選擇您的興趣:
	<div><input type="checkbox" name="hobby" id="tv" /><label for="tv">看電視</label></div>
	<div><input type="checkbox" name="hobby" id="ball" /><label for="ball">打球</label></div>
	<div><input type="checkbox" name="hobby" id="web" /><label for="web">上網</label></div>
	<div><input type="checkbox" name="hobby" id="literature" /><label for="literature">看書</label></div>
	<div><input type="checkbox" name="hobby" id="travel" /><label for="travel">旅遊</label></div>
	<div><input type="checkbox" name="hobby" id="music" /><label for="music">聽音樂</label></div>
	<div>
		<input type="button" value="全選" />
		<input type="button" value="全不選" />
		<input type="button" value="反選" />
	</div>
</form>
<script>
	var hobbies = document.forms[0].hobby;
	var lastDiv = document.getElementsByTagName('div')[6];
	var selectAll = lastDiv.getElementsByTagName('input')[0];
	var selectNone = lastDiv.getElementsByTagName('input')[1];
	var selectReverse = lastDiv.getElementsByTagName('input')[2];
	
	function changeSelection(a){
		for(var i=0;i<hobbies.length;i++){
			if(a<0){
				hobbies[i].checked = !hobbies[i].checked;
			}
			else{
				hobbies[i].checked = a;
			}
		}
	}
	
	selectAll.onclick = function(){changeSelection(1);}
	selectNone.onclick = function(){changeSelection(0);}
	selectReverse.onclick = function(){changeSelection(-1);}
</script>
Boolean property that reflects the current state of the checkbox, "true" if it's checked, and "false" if not.
Example(s):
<form name="test">
<input type="checkbox" name="checkgroup" checked />
<input type="checkbox" name="checkgroup" />
<input type="checkbox" name="checkgroup" checked />
</form>

<script type="text/javascript">
for (i=0; i<document.test.checkgroup.length; i++){
if (document.test.checkgroup[i].checked==true)
alert("Checkbox at index "+i+" is checked!")
}
</script>
defaultChecked 屬性 如果初始時是選中的則傳回true
Boolean property that reflects the value of the CHECKED attribute.
disabled 屬性 Boolean value that sets/ returns whether the checkbox is disabled.
form 屬性 指向表單元素所在的<form>
References the form that contains the checkbox.
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, "checkbox".
value 屬性 存/取表單元素value屬性的值
A read/write string that specifies the value of the checkbox (the value attribute).
onBlur 事件屬性 Code is executed when the focus is removed from the checkbox.
onClick 事件屬性 Code is executed when user clicks on the checkbox.
onFocus 事件屬性 Code is executed when the focus is set on the checkbox.
blur() 方法 使焦點離開某個元素
Removes focus away from the checkbox.
click() 方法 模擬使用者按一下該元素
Simulates a user clicking on the checkbox.
focus 方法 聚焦到某個元素上
Sets focus on the checkbox.