此練習使用 javascript 讀取 RADIO 與 CHECKBOX 的狀態。此練習用到以下元素與特徵:
- FORM:宣告輸入表格。
- RADIO:宣告一組單選鈕。
- CHECKBOX:宣告一組複選鈕。
- document.forms:用來讀取或設定輸入表格的物件清單。
- onclick:用滑鼠左鍵點擊時,會啟動程序。。
- checked:RADID 與 CHECKBOX 元素物件的特徵,存放 true 表示此項被點選了;否則存放 false。
- value:RADID 與 CHECKBOX 元素物件的特徵,存放此項的值。
- 程式用法:
<form id='fm1' onclick='hitted(this, "country")'>
單選的 RADIO:
<div>
<input name='country' type=radio
value='ROC'checked>中華民國<br />
<input name='country' type=radio
value='USA'>美國<br />
<input name='country' type=radio
value='NZL'>紐西蘭<br />
<input name='country' type=radio
value='FRC'>法國
</div>
</form>
<form id='fm2' onclick='favors(this, "stars")'>
複選的 CHECKBOX:
<input name='stars' type=checkbox
value='Jolin'checked>蔡依林
<input name='stars' type=checkbox
value='沛慈'>曾沛慈
<input name='stars' type=checkbox
value='敬騰'>蕭敬騰
<input name='stars' type=checkbox
value='宗緯'>楊宗緯
</form>
<p>
<script type='text/javascript'>
function hitted( o, name )
{
for(var i=0; i < o[name].length; i++)
if( o[name][i].checked ) break;
alert( o[name][i].value );
}
function favors( o, name)
{
var s='';
for(var i=0; i < o[name].length; i++)
if( o[name][i].checked ) s+=' / '+ o[name][i].value;
alert( s );
}
for(var i=0; i < document.forms['fm1'].country.length; i++)
document.write( document.forms['fm1'].country[i].value
+' / '+ document.forms['fm1'].country[i].checked +'<br />');
for(var i=0; i < document.forms['fm2'].stars.length; i++)
document.write( document.forms['fm2'].stars[i].value
+' / '+ document.forms['fm2'].stars[i].checked +'<br />');
</script> - 執行結果:
ROC / true
USA / false
NZL / false
FRC / false
Jolin / true
沛慈 / false
敬騰 / false
宗緯 / false