整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
Radio Object
Radio 對象代表 HTML 表單中的單選按鈕。
在 HTML 表單中 <input type="radio"> 每出現(xiàn)一次，一個 Radio 對象就會被創(chuàng)建。
單選按鈕是表示一組互斥選項按鈕中的一個。當一個按鈕被選中，之前選中的按鈕就變?yōu)榉沁x中的。
當單選按鈕被選中或不選中時，該按鈕就會觸發(fā) onclick 事件句柄。
您可通過遍歷表單的 elements[] 數(shù)組來訪問 Radio 對象，或者通過使用 document.getElementById()。
Radio 對象屬性
W3C: W3C 標準。
| 屬性 | 描述 | W3C |
|---|---|---|
| checked | 設(shè)置或返回單選按鈕的狀態(tài)。 | Yes |
| defaultChecked | 返回單選按鈕的默認狀態(tài)。 | Yes |
| disabled | 設(shè)置或返回是否禁用單選按鈕。 | Yes |
| form | 返回一個對包含此單選按鈕的表單的引用。 | Yes |
| name | 設(shè)置或返回單選按鈕的名稱。 | Yes |
| type | 返回單選按鈕的表單類型。 | Yes |
| value | 設(shè)置或返回單選按鈕的 value 屬性的值。 | Yes |
標準屬性和事件
Radio對象同樣支持標準的 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
家好，這節(jié)來繼續(xù)學習Web。單選和Webbox。多選，單選和多選一般應(yīng)用在哪？單選主要應(yīng)用在比如說選擇一些性別，或者說選擇一個你所在的城市，這種只可以有一個選項的業(yè)務(wù)場景，一般就用單選來實現(xiàn)。
Webbox一般用于多選，比如說你的愛好，或說你比較關(guān)注的一些關(guān)注的一些事情的主題，這些是不都是一種多選場景，一一來看。
先看一下Web，還是一樣打開之前建的demo項目，然后上課的內(nèi)容，也就每節(jié)課的密碼，老師都會把它整理好，針對上一節(jié)的視頻給同伴發(fā)給大家，所以大家不用、不用著急。就后續(xù)的這源碼都是這樣會給的。
我這塊提前把這個結(jié)構(gòu)建好了，不每次都重新建了，直接就可以進入到Web標簽的學習。
現(xiàn)在比如說要做一個選擇性的標簽，先寫一個標題，有選擇性別，我用Web做了個標題，然后還是Web，它的類型是什么？Web意思就是一個單選，比如男，那還有什么？我再用一個Web換行，再寫一個音譜的，然后Web是女，這樣寫了兩個單選標簽對吧？
之前上節(jié)課Webtype類型是什么？包括這個password都是一個輸入類型，現(xiàn)在變成Web看一下什么效果。右鍵運行運行之后大家看到這是不是有兩個小圓點，這塊就是一個單選。其實當我點擊這個圓點的時候就會選中，當我再點女的時候大家注意，是不是兩個都選中了？這是為什么？
原因很簡單，因為要配置一個單選，單位需要給一個內(nèi)幕屬性，并且這個內(nèi)幕屬性的值必須是一樣的，比如就叫他sexy，然后下面也要配置一個Web。
然后再刷新這個界面，再試一下重新選一下試試。當我點這個Web的時候選中了男，當我選點女的時候大家注意，不就選中了這個女，沒有說兩個都可以選了。
至于為什么？這個Web的屬性必須是一樣的，因為后續(xù)在這個索取的時候就獲取Web內(nèi)容的時候，是通過內(nèi)放表單的方式去獲取，所以這兩個必須設(shè)置成一樣的，它是一個要求。
還有一個什么屬性？也很重要，就是Web，比如END是悶和。那Web是干嘛的？其實就是在后續(xù)獲取單選按鈕的時候，它會取的值，當我選男的時候，這個地方獲取到的值就是Web，當我取女的時候獲取到的值就是woman，那么這里邊是不可以改。當我取娶男的時候娶女的時候比如零，一來代表都是可以的，甚至可以用中文去代表也沒有任何問題。
但是一般從后臺數(shù)據(jù)庫的設(shè)置角度要么就用零一數(shù)字來代替，要么就是用一個字母串，字母就剛才的悶、無悶來代替，這都是有可能的。當然這節(jié)課的重點主要是學習單選標簽的使用。
如果我還想做一個什么？做一個城市所在城市，是不是依然也可以用單選按鈕？我把上面拿過來，直接考過來。然后從這塊做hr中線，把它區(qū)分一下，城市類型是不還是單選？然后這個地方是可以用city？其實name就是一個標識，只要保證它是一樣的就可以了。
至于這個值就自己隨便設(shè)置了。然后再刷新一下界面，看一下是不這塊有了兩個單選，并且上面是不可以分開選擇，注意是不可以分開選。當然內(nèi)幕值不要是也設(shè)置成sex，一旦把四個都設(shè)置成一樣會出現(xiàn)什么效果？就是四個是不是只能有一個被選中？所以如果有多個單選項，內(nèi)拇指分開設(shè)置成一樣的就可以了。
這個就是單選按鈕，繼續(xù)往下看下面是checkbox多選按鈕，就是說選愛好、關(guān)注的人都是多項選擇的業(yè)務(wù)，就可以用拆boss來實現(xiàn)拆boss其實也是屬于音譜的標簽，只是它的類型是拆個boss，可以看一下，這塊老樣子給它區(qū)分，先用一個線把它分開。
下面做一個什么？你的愛好，我是不首先Web站姿-tap是什么？checkbox，看id給提示了有這樣的屬性。比如足球，比如現(xiàn)在要做一個愛好選擇？這個內(nèi)幕給一個，給一個內(nèi)幕，一定要保證內(nèi)幕是一致的，復(fù)制四個籃球。哪個籃？乒乓球、羽毛球。四個球類運動。
現(xiàn)在如果去選是不是就可以進行多項選擇？可以看下效果，多選它的樣子是不和單選有點區(qū)別。單選是一個小圓球，多選是一個正方形，點擊勾一個兩個，是不是可以多選？
注意，雖然name設(shè)置的是一樣的，但是可以進行多選的和單選。是不是有點區(qū)別？內(nèi)幕設(shè)置一樣的目的是什么？其實也是為了在最后放表單做數(shù)據(jù)獲取的時候是通過對稱，然后把整個多選的屬性給獲取出來，這個就是多項選擇。
再往下還有一個默認選中。默認選中是干嘛？就是當我進到一個界面，其實現(xiàn)在就拿的性別來說，不外乎圖中說了，除了男就是女，可能還有一個中性。現(xiàn)在性別也不一定是男和女？當然，正常來說，可能比如做了一個游戲網(wǎng)站，想做一個數(shù)據(jù)收集，是比較多的呀，我默認想讓他一進來就選擇男性就選中男性，就給一個默認值。其實給默認值用戶體驗比較好，用戶不用單獨再去點一下。其實我本來就是男的，我一刷新這個默認選中的難我就跳過這個屬性了，我就不用再去點一下。其實就是做這樣的事情，這個也非常常見。
怎么去做呢？只要使用checkbox的屬性就可以了。既然是一個屬性，我是不是就可以直接把這個設(shè)置到這就行了，就這樣設(shè)置一個chicken。設(shè)置好之后刷新看一下效果，是不是某人選中了，那我換一下。是不是默認選中了女？這就是一個check的屬性，多選也是一樣，如果想讓他默認就選中足球籃球，那就給足球籃球設(shè)置兩個check的分別設(shè)置，這樣當我一旦刷新界面，也就是一進來界面的時候，這個愛好默認就會選中足球和籃球，看一下效果。
當然選中以后還是可以取消掉的，最終提交的數(shù)據(jù)肯定還是在提交表單的那一刻界面上這些選擇為準，并不是默認選中以后就無法做更改了。這個就是一個單選和一個多選。
這節(jié)課就到這里。
輯導(dǎo)語：本文作者分享了有關(guān)Radio Button、Tabs 和 Segmented組件的用法問題，講述了Radio Button、Tabs 和 Segmented 組件在用法上的區(qū)別以及聯(lián)系，以及總結(jié)了幾個組件各自的功能特點，一起來學習一下吧，希望對你有幫助。
最近很多同學問我有關(guān) Radio Button、Tabs 和 Segmented 組件的用法問題，它們到底在用法上有什么區(qū)別？又有什么聯(lián)系？
先看看這幾個組件各自的功能特點：
單選（Radio）組件常用于在多個備選項中選擇某個單個選項。
△各種樣式的單選（Radio）
單選（Radio）組件的設(shè)計思路來源于老式收音機上的按鈕，一排按鈕，按下其中一個，其他的按鈕就會彈起來，因此被叫做 Radio Button 并沿用至今。
△ 老式收音機上的按鈕
單選（Radio）組件在用法上有以下特點：
所以我們可以認為Radio 組件可以使用戶直接做決策，即用戶在比較完選項的優(yōu)劣之后，就可以做出最終的判斷和選擇。組件的功能側(cè)重點在于選項比較和輸入決策。
分段控制器（Segmented/Segmented Control）用于展示多個選項及其相關(guān)的信息，并允許用戶選擇其中單個選項，查看信息。
△各種樣式的分段控制器（Segmented）
細心的你可能發(fā)現(xiàn)，分段控制器（Segmented）和單選（Radio）在有些樣式上幾乎一樣，這點我們稍后再展開說明。分段控制器（Segmented）組件在用法上有以下特點：
分段控制器（Segmented）組件所包含的內(nèi)容和信息可以更多樣。用戶在點擊某個選項之后，通常會進行其他相關(guān)操作，包括閱讀相關(guān)信息、查看表單數(shù)據(jù)等。
因此我們可以理解為：用戶操作Segmented并不用于輸入或決策，組件的功能側(cè)重點更多在于信息呈現(xiàn)。
△ iOS Health 中的分段控制器用法
標簽頁（Tabs） 同樣用于展示多個選項和其相關(guān)的子級內(nèi)容及信息，允許用戶選擇單個選項，進行其他操作。
△各種樣式的標簽頁（Tabs）
分頁器（Tabs）組件在用法上有以下特點：
相比于Segmented 和Radio，Tabs 在形式和層級上更為多樣和復(fù)雜，更多被用于收納和整理內(nèi)容，組件的功能側(cè)重點在于引導(dǎo)功能，重點應(yīng)用場景為導(dǎo)航功能和框架布局。
上文我們分析了Radio、Segmented 和 Tabs 組件的功能區(qū)別，但在很多實際應(yīng)用中，尤其是 C 端產(chǎn)品，這三個組件更像是視覺樣式不同的同一類組件。
例如下圖，在大眾點評和飛豬 App 的應(yīng)用案例中，我們會發(fā)現(xiàn)，某種程度上 Segmented 和 Tabs組件互換后，對于用戶體驗的影響也并不大。
原因之一是，用戶在比較放松、簡單、快捷的應(yīng)用場景下，并不會太糾結(jié)控件樣式：
△ 大眾點評 App 和飛豬 App
而很多設(shè)計系統(tǒng)中也沒有對這幾個組件做更嚴苛的規(guī)定。以Apple Design為例，官方給出的關(guān)于 Segmented 組件的解釋是：
Like buttons, segments can contain text or images. Segments can also have text labels beneath them(or beneath the control as a whole)。
也就是說 Segmented 組件在視覺和交互上，既可以像 button 一樣帶有文字和圖片，也可以使用整體帶下劃線的樣式，這就與 Tabs 在外觀上不做區(qū)分了。
再來看看螞蟻集團的 Ant Design，Segmented 組件在 4.0 版本之后才正式提供使用，而 Radio 組件始終包含以下兩種樣式，并沒有在Segmented 組件上線后去掉 button 的樣式。
因此對于Radio、Segmented 和 Tabs 組件的使用方式，有如下建議：
對于絕大多數(shù)比較簡單、快捷的場景（尤其是 C 端產(chǎn)品），Radio / Tabs / Segmented 可以更多參考頁面的視覺風格和功能需要，來設(shè)計組件樣式，并不需要過分糾結(jié)于要讓用戶分清楚使用的是哪個組件、是否要遵循一定的樣式原則。
對于復(fù)雜的工具型或企業(yè)級產(chǎn)品，規(guī)范好這幾個組件的層級順序很重要。比如可以規(guī)定帶下劃線的 Tabs 是第一層級和第二層級，按鈕樣式的 Segmented 是第三層級，radio 則用于底層的信息內(nèi)容中。這樣可以給用戶傳達比較穩(wěn)定的信息層次關(guān)系。
如果在某些特殊場景中一定要區(qū)分組件，以下總結(jié)可以幫助你做選擇：
以上，希望對你有幫助。
作者：元堯，微信公眾號：長弓小子；
本文由@ 元堯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
