HTML单选按钮教程及示例

在旧时代，收音机有一些按钮来改变保存到特定按钮的电台。HTML还提供单选按钮，以便将其中一个单选按钮添加到一组单选按钮中。HTML中的单选按钮是用 标记定义的，因为单选按钮被称为来自用户的输入。

单选按钮标签

我们将通过提供 type 作为 radio 就像下面一样。单选按钮标签没有像等那样的封闭标签。

单选按钮组

单选按钮通常用作一个组。因为单选按钮的主要用法是向用户提供一些选择，用户选择其中一个。所以我们通常提供多个单选按钮作为一个组。为了创建组，同一组中所有单选按钮的“单选按钮名称”属性应相同。例如，如果我们想询问用户年龄范围，我们必须为下面的所有单选按钮使用相同的名称。

         
Radio Buttons
      
          Below 18          Between 18 and 65           Over 65        
   

设置默认单选按钮选择

当用户显式选择其中一个单选按钮时，默认行为是取消选择所有单选按钮。在某些情况下，我们需要提供一个默认选中的单选按钮。我们可以用 checked 输入标记中的属性。在本例中，我们将提供 Between 18 and 65 默认选中。

         
Radio Buttons
      
          Below 18          Between 18 and 65           Over 65        
   

检查是否选择了给定的单选按钮

选择单选按钮后，我们可以在JavaScript中获取或检查选中的单选按钮值。我们可以使用不同的框架AngularJS、jQuery等，但为了简单起见，我们将使用纯JavaScript。我们将从单选按钮名称中获取值并对其进行迭代。

         
Radio Buttons
      
          Below 18          Between 18 and 65           Over 65        
                     

禁用单选按钮

单选按钮可以在不同的情况下使用，在某些情况下必须禁用。我们可以用 disabled 属性，该属性将禁用并阻止选择单选按钮。在本例中，我们将禁用 Over 65 单选按钮。

         
Radio Buttons
      
          Below 18          Between 18 and 65           Over 65        
         

单选按钮与复选框

与单选按钮一样，也有复选框提供多项选择。单选按钮和复选框之间的主要区别是，一次只能选中一个单选按钮，但可以选中多个复选框，而不会出现问题。  所以单选按钮套件，以单一的回答问题，如年龄，性别，是/否等，其中复选框可以起诉多个回答问题，如团队，学校，城市等。