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