方法一 |
<BODY> |
<input type= "checkbox" name= "cbox" value= "cbox1" onClick= "chooseOne(this);" >checkBox1 |
<input type= "checkbox" name= "cbox" value= "cbox2" onClick= "chooseOne(this);" >checkBox2 |
<input type= "checkbox" name= "cbox" value= "cbox3" onClick= "chooseOne(this);" >checkBox3 |
<input type= "checkbox" name= "cbox" value= "cbox4" onClick= "chooseOne(this);" >checkBox4 |
</BODY> |
<script> |
//chooseOne()函式,參數為觸發該函式的元素本身 |
function chooseOne(cb){ |
//先取得同name的chekcBox的集合物件 |
var obj = document.getElementsByName( "cbox" ); |
for (i=0; i<obj.length; i++){ |
//判斷obj集合中的i元素是否為cb,若否則表示未被點選 |
if (obj[i]!=cb) obj[i].checked = false ; |
//若是 但原先未被勾選 則變成勾選;反之 則變為未勾選 |
//else obj[i].checked = cb.checked; |
//若要至少勾選一個的話,則把上面那行else拿掉,換用下面那行 |
else obj[i].checked = true ; |
} |
} |
</script> |
方法二 |
<BODY> |
<div id= "mydiv" > |
<input type= "checkbox" name= "cbox1" value= "cbox1" onClick= "chooseOne(this);" >checkBox1 |
<input type= "checkbox" name= "cbox2" value= "cbox2" onClick= "chooseOne(this);" >checkBox2 |
<input type= "checkbox" name= "cbox3" value= "cbox3" onClick= "chooseOne(this);" >checkBox3 |
<input type= "checkbox" name= "cbox4" value= "cbox4" onClick= "chooseOne(this);" >checkBox4 |
</div> |
</BODY> |
<script> |
//chooseOne()函式,參數為觸發該函式的元素本身 |
function chooseOne(cb) { |
//先取得Div元素 |
var obj = document.getElementById( "mydiv" ); |
///判斷obj中的子元素i是否為cb,若否則表示未被點選 |
for (i=0; i<obj.children.length; i++){ |
if (obj.children[i]!=cb) obj.children[i].checked = false ; |
//若是 但原先未被勾選 則變成勾選;反之 則變為未勾選 |
else obj.children[i].checked = cb.checked; |
//若要至少勾選一個的話,則把上面那行else拿掉,換用下面那行 |
//else obj.children[i].checked = true; |
} |
} |
</script> |