在某些項目中有若干個選項，其標誌是前面有一個圓環，當我們選中某個選項時，出現一個小實心圓點表示該項被選中，如右圖所示。在一組單選按鈕選項中，只能選中其中一項，這和複選框是不同的。
基本介紹
- 中文名：單選按鈕
- 外文名：[英]RadioButton
詳細解析,多選按鈕,控制項,
詳細解析
在某個網站註冊時，我們會注意到“性別”欄位有兩個選項：“男”和“女”。如果不允許用戶選擇多個選項，可以使用表單元素的單選按鈕對象。單選按鈕對象用於一組互相排斥的值，也就是用戶只能從選項列表中選擇一項。單選按鈕組中所有按鈕共享同一個名稱，所以瀏覽器知道將按鈕組合在一起，通過選中其中一個按鈕，其他按鈕自動變為未選中狀態。除此之外，每個按鈕可以有自己獨特的屬性。
列出了與單選按鈕對象關聯的屬性。
單選按鈕對象的屬性
名稱 說明
checked通過布爾值設定或檢索單選按鈕是否被選中的狀態
name設定或檢索單選按鈕的名稱，該屬性與整個單選按鈕組相聯繫。
type指定控制項的類型
length返回單選按鈕組中的單選按鈕的個數
列出了與單選按鈕對象關聯的事件處理程式。
與單選按鈕對象關聯的事件處理程式
表單元素事件處理程式說明
單選按鈕onBlur單選按鈕失去焦點時觸發
onClick單選按鈕被選定或取消選定時觸發
onFocus單選按鈕接收焦點時觸發
在以下示例中，onClick事件將根據所單擊的選項按鈕在文本框中生成一條訊息。
<HTML>
<HEAD>
<TITLE>使用Option button對象</TITLE>
<SCRIPT LANGUAGE=\"JavaScript\">
<!--
function check()
{
gender=document.forms[0].gender;
answer=document.forms[0].answer;
txt=\"\";
for(i=0;i<gender.length;i++)
{
if (gender.checked)
{
txt=txt+gender.value+\"\"
}
}
answer.value=\"您選擇了\"+txt;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<P>請指定您的性別<BR><BR>
<HR ALIGN=\"left\" HRSHADE=\"limegreen\" WIDTH=250px HEIGHT=50px></HR>
<INPUT TYPE=\"radio\" NAME=\"gender\" VALUE=\"男\" onClick=\"check()\">男
<INPUT TYPE=\"radio\" NAME=\"gender\" VALUE=\"女\" onClick=\"check()\">女
<HR ALIGN=\"left\" HRSHADE=\"limegreen\" WIDTH=250px HEIGHT=50px></HR>
<INPUT TYPE=\"text\" NAME=\"answer\" SIZE=\"30\">
</FORM>
</BODY>
</HTML>
顯示了執行以上HTML代碼之後的輸出結果。
多選按鈕
以幾個方框表示，選中後會呈現打鉤狀。顧名思義，可以選一個以上的選項。
控制項
單選按鈕，也叫做RadioButton，是個控制項。用兩個或多個該控制項並且Group屬性設定相同值，可使選擇的結果唯一。這是一個基礎控制項。很多第三方控制項也對單選按鈕做出了擴充，提供了更多地功能，以滿足不同的需求。只要將dll添加到工具箱就可以使用。
