Radio 對象代表 HTML 表單中的單選按鈕。在 HTML 表單中 <input type="radio"> 每出現一次，一個 Radio 對象就會被創建。單選按鈕是表示一組互斥選項按鈕中的一個。當一個按鈕被選中，之前選中的按鈕就變為非選中的。當單選按鈕被選中或不選中時，該按鈕就會觸發 onclick 事件句柄。您可通過遍歷表單的 elements[] 數組來訪問 Radio 對象，或者通過使用 document.getElementById()。由www.169it.com搜集整理
一、單選按鈕控件語法
| 1 |
<input name="Fruit" type="radio" value="" /> |
使用html input標簽，name為自定義，type類型為“radio”的表單.
二、radio單選按鈕代碼舉例
1、html代碼片段：
| 1 2 3 4 5 6 7 8 |
<form action="" method="get"> 您最喜歡水果？<br /><br /> <label><input name="Fruit" type="radio" value="" />蘋果 </label> <label><input name="Fruit" type="radio" value="" />桃子 </label> <label><input name="Fruit" type="radio" value="" />香蕉 </label> <label><input name="Fruit" type="radio" value="" />梨 </label> <label><input name="Fruit" type="radio" value="" />其它 </label> </form> |
2.舉例代碼片段二(默認選中設置舉例):
| 1 2 3 |
<input type="radio" name="identity" value="學生" checked="checked" />學生 <input type="radio" name="identity" value="教師" />教師 <input type="radio" name="identity" value="管理員" />管理員 |
在代碼舉例二種， checked="checked" 表示默認選中項設置。
3.代碼舉例三(js操作radio):
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <script> <!-- //選中2返回的也是1，找到第一個ID為該值的DOM，彈出 1 function getVById(){alert(document.getElementById('test11').value);} function getVByName(){ var tt = document.getElementsByName('test11'); for (var iIndex = 0; iIndex < tt.length ; iIndex++ ) { if(tt[iIndex].checked) { alert(tt[iIndex].value); break; } } }; --> </script> <title>http://www.169it.com</title> </head> <body> <input type="radio" id="test11" name="test11" value="1" />測試1 <input type="radio" id="test11" name="test11" value="2" />測試2 <input type="button" value="BTN_ByID" onclick="getVById()" /> <input type="button" value="BTN_ByName" onclick="getVByName()" /> </body> <html> |