?
This document uses PHP Chinese website manual Release
<input>類型的元素radio通常用在組中 - 用于描述一組相關(guān)選項的單選按鈕的集合。一個給定組中只能有一個單選按鈕同時被選中。單選按鈕通常呈現(xiàn)為小圓圈，選中時會填充或突出顯示。
它們被稱為單選按鈕，因為它們的外觀和操作方式類似于老式收音機(jī)上的按鈕。
<input id="radioButton" type="radio">
注意：復(fù)選框類似于單選按鈕，但有一個重要的區(qū)別：單選按鈕用于從一組中選擇一個值，而復(fù)選框允許您打開和關(guān)閉各個值。在存在多個控件的情況下，單選按鈕允許從其中選擇一個，而復(fù)選框允許選擇多個值。
值 | 代表單選按鈕的值的DOMString。 |
|---|---|
活動 | 改變和輸入 |
支持的通用屬性 | 檢查 |
IDL屬性 | 檢查和價值 |
方法 | 選擇（） |
值
該value屬性是一個DOMString包含單選按鈕的值。用戶代理從不向用戶顯示該值。相反，它用于識別組中哪個單選按鈕被選中。
<form>Please specify your gender: <div> <input type="radio" id="genderChoice1" name="gender" value="male"> <label for="genderChoice1">Male</label> <input type="radio" id="genderChoice2" name="gender" value="female"> <label for="genderChoice2">Female</label> <input type="radio" id="genderChoice3" name="gender" value="other"> <label for="genderChoice3">Other</label> <input type="radio" id="genderChoice4" name="gender" value="notSpecified"> <label for="genderChoice4">Prefer not to specify</label> </div> <div> <button type="submit">Submit</button> </div></form>
如果該value屬性被省略，則提交的數(shù)據(jù)將被賦予默認(rèn)值on，所以在這種情況下提交的數(shù)據(jù)將是gender=on。這沒有多大意義，所以記得設(shè)置你的value屬性！
注意：如果提交表單時沒有選中單選按鈕，則沒有值提交給服務(wù)器來表示未選中的狀態(tài)（例如value=unselected）。該值根本不提交給服務(wù)器。
“name”設(shè)置是單選按鈕的重要屬性，因為它標(biāo)識單選按鈕屬于哪個組。由于單選按鈕組合起來作為一個單一的單位一起工作，你必須為所有相關(guān)的單選按鈕指定一個通用名稱。當(dāng)兩個或多個單選按鈕共用一個名稱時，選擇其中一個按鈕將取消選擇所有其他名稱相同的按鈕。如果您在單個頁面上有多個單選按鈕組，則不同組中的按鈕必須具有不同的“名稱”屬性。
使用單選按鈕
我們已經(jīng)介紹了上面單選按鈕的基本原理?，F(xiàn)在我們來看看您可能需要了解的其他常見的單選按鈕相關(guān)功能和技巧。
默認(rèn)選擇一個單選按鈕
要使默認(rèn)情況下選中一個單選按鈕，只需包含checked屬性，如前面示例的修訂版本所示：
<form> Please specify your gender: <div> <input type="radio" id="genderChoice1" name="gender" value="male"> <label for="genderChoice1">Male</label> <input type="radio" id="genderChoice2" name="gender" value="female"> <label for="genderChoice2">Female</label> <input type="radio" id="genderChoice3" name="gender" value="other"> <label for="genderChoice3">Other</label> <input type="radio" id="genderChoice4" name="gender" value="notSpecified" checked> <label for="genderChoice4">Prefer not to specify</label> </div> <div> <button type="submit">Submit</button> </div></form>
在這種情況下，第一個單選按鈕現(xiàn)在默認(rèn)選中。
注意：如果您將該checked屬性放在多個單選按鈕上，以后的實例將覆蓋較早的實例;也就是說，最后一個checked單選按鈕將被選中。這是因為一次只能選擇一個組中的一個單選按鈕，并且用戶代理每當(dāng)新的標(biāo)記被選中時就自動取消選擇其他單選按鈕。
為您的單選按鈕提供更大的擊中區(qū)域
在上面的示例中，您可能已經(jīng)注意到，您可以通過單擊其關(guān)聯(lián)的<label>元素以及單選按鈕本身來選擇一個單選按鈕。這是HTML表單標(biāo)簽的一個非常有用的功能，可以讓用戶更容易點擊他們想要的選項，特別是在智能手機(jī)等小屏幕設(shè)備上。
除了可訪問性，這是<label>在表單上正確設(shè)置元素的另一個很好的理由。
驗證
單選按鈕不參與約束驗證;他們沒有真正的價值被約束。
示例
下面的例子顯示了我們在整篇文章中看到的一個稍微更徹底的例子，其中有一些額外的樣式，并且通過使用專門的元素建立了更好的語義。HTML看起來像這樣：
<form> <fieldset> <legend>Please specify your gender</legend> <div> <input type="radio" id="genderChoice1" name="gender" value="male"> <label for="genderChoice1">Male</label> <input type="radio" id="genderChoice2" name="gender" value="female"> <label for="genderChoice2">Female</label> <input type="radio" id="genderChoice3" name="gender" value="other"> <label for="genderChoice3">Other</label> <input type="radio" id="genderChoice4" name="gender" value="notSpecified" checked> <label for="genderChoice4">Prefer not to specify</label> </div> <div> <button>Submit</button> </div> </fieldset></form>
這里沒有太多的新東西要注意，除了添加<fieldset>和<legend>元素，這些元素有助于將功能很好地和以語義的方式分組。
涉及的CSS更有意義：
html {
font-family: sans-serif;}div:first-of-type {
display: flex;
align-items: flex-start;
margin-bottom: 5px;}label {
margin-right: 15px;
line-height: 32px;}input { -webkit-appearance: none; -moz-appearance: none;
appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #999;
transition: 0.2s all linear;
outline: none;
margin-right: 5px;
position: relative;
top: 4px;}input:checked {
border: 6px solid black;}button, legend {
color: white;
background-color: black;
padding: 5px 10px;
border-radius: 0;
border: 0;
font-size: 14px;}button:hover, button:focus {
color: #999;}button:active {
background-color: white;
color: black;
outline: 1px solid black;}這里最值得注意的是該appearance屬性的使用（需要支持某些瀏覽器的前綴）。默認(rèn)情況下，單選按鈕（和復(fù)選框）的樣式與操作系統(tǒng)的原生樣式為這些控件。通過指定appearance: none，您可以完全刪除本地樣式，并為它們創(chuàng)建自己的樣式。這里我們使用一個border沿border-radius和transition創(chuàng)建一個漂亮的動畫無線電選擇。還要注意如何選擇:checked偽類來指定單選按鈕外觀的樣式。
這不是沒有問題的：appearance對于簡單的樣式來說不是太糟糕，但是它在某些瀏覽器中往往表現(xiàn)不一致，在Internet Explorer中根本不起作用。仔細(xì)測試以確保您的網(wǎng)站在您想要用戶或客戶的每個瀏覽器中都能正常工作。
規(guī)范
規(guī)范 | 狀態(tài) | |
|---|---|---|
HTML生活標(biāo)準(zhǔn)在該規(guī)范中定義'<input type ='radio'>''。 | 生活水平 | |
HTML5該規(guī)范中的<input type =“radio”>“的定義。 | 建議 |
瀏覽器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | (Yes) | 4.0 (2.0) | (Yes) | (Yes) | (Yes) |