html代碼中的Radio類型和復選框類型有什么區別？

Question

html 代碼中的 Radio 類型和復選框類型有什么區別？

Answer 1

單選輸入可提供單選用戶選擇。 它通常被描述為一個空圓圈（未選中）和實心圓圈（選中）。

復選框輸入可提供多選用戶選擇。 它通常被描繪為一個空的正方形（未選中）和一個正方形內的選中標記（選中）。

在語義上，兩個HTML元素之間的唯一區別是單選選項的type="radio"屬性和type="checkbox"選項的type="checkbox"屬性。 相關元素應具有相同的name屬性。

 <fieldset> <legend>Radio Selection</legend> <label><input type="radio" name="radio" value="1">Option 1</label> <label><input type="radio" name="radio" value="2">Option 2</label> <label><input type="radio" name="radio" value="3">Option 3</label> </fieldset> <fieldset> <legend>Checkbox Selection</legend> <label><input type="checkbox" name="checkbox" value="1">Option 1</label> <label><input type="checkbox" name="checkbox" value="2">Option 2</label> <label><input type="checkbox" name="checkbox" value="3">Option 3</label> </fieldset> 

Answer 2

兩者都是用戶輸入類型，可以形式使用，但是從一組單選按鈕中只能選擇一個。 另一方面，可以從一組復選框中選擇任意數量的復選框。

何時使用它們的示例：

復選框：

1.您的最愛運動：

[]板球

[]足球

[]網球

[]羽毛球

答案可以是上述問題的1個或多個選項。

單選按鈕：

2您的性別：

O男

O女

O其他

對於上述問題，只有一個選項可以有效，因此可以迫使用戶僅選擇一個。

Answer 3

我將使用一個基於MDN單選按鈕文檔的示例：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/radio

他們記下了重要區別：

注意 ：復選框類似於單選按鈕，但有一個重要區別：單選按鈕設計用於從集合中選擇一個值，而復選框則可用於打開和關閉各個值。 如果存在多個控件，則單選按鈕允許從所有控件中選擇一個，而復選框則允許選擇多個值。

選擇維護無人機：
○休伊
○杜威
○路易

提示用戶使用單選按鈕從三個選項中選擇一個維護無人機。 他們只得到一架無人駕駛飛機，所以單選按鈕強制只能檢查一架 。 用戶有一個選擇 ： 您想要哪種維護無人機？ 這個選擇是這些問題中的哪個 。

選擇您的維護無人機：
☐休伊
☐杜威
☐路易

讓我們用復選框重新創建此示例。 用戶現在可以選擇所有無人機，也可以不選擇它們，因為復選框允許用戶根據需要選擇任意數量的框 。 用戶有多種選擇 ： 您是否想要Huey維護無人機？ （是/否） ； 您想要杜威維護無人機嗎？ （是/否） ； 您要路易維護無人機嗎？ （是/否） 。 這是一系列的是或否問題。

Answer 4

復選框：復選框是一種輸入選項，代表具有打開，關閉或混合選擇的設置或值。 ...組中的復選框是非排他性選項； 可以在任何給定時間選中一個組中的多個復選框。 單選按鈕：單選按鈕是代表互斥選擇的一組控件之一，在屏幕上以小圓圈顯示。 它還具有兩個狀態，並且在選中時，圓圈將填充一個實心點。

與復選框組相反，單選按鈕組充當單個控件，並將用戶的選擇限制為所提供范圍中的一個選項。