Ionic - 单选按钮

单选按钮是另一种表单元素，我们将在本章中介绍。单选按钮与切换按钮和复选框表单的区别在于，使用前者时，您只能从列表中选择一个单选按钮。而后者允许您选择多个。

添加单选按钮

由于始终需要从多个单选按钮中进行选择，因此最佳方法是创建一个列表。每当我们想要多个元素时，我们都会这样做。列表项类将为item-radio。同样，我们将为此使用label，就像我们对所有其他表单所做的那样。Input 将具有name属性。此属性将对您想要用作可能选择的按钮进行分组。item-content类用于清晰地显示选项。最后，我们将使用radio-icon类添加复选标记图标，该图标将用于标记用户选择的选项。

在下面的示例中，有四个单选按钮，并且选择了第二个按钮。

<div class = "list">
   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 1
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 2
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 3
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 4
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>
</div>

以上代码将生成以下屏幕：

多个单选按钮组

有时您需要创建多个组。这就是name属性的用途；以下示例将前两个按钮和后两个按钮分别分组为两个选项组。

我们将使用item-divider类将两个组分开。请注意，第一组的name属性等于group1，而第二个组使用group2。

<div class = "list">
   <div class = " item item-divider">
      Group1
   </div>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 1
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 2
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <div class = "item item-divider">
      Group2
   </div>

   <label class = "item item-radio">
      <input type = "radio" name = "group2" />
      <div class = "item-content">
         Choice 3
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group2" />
      <div class = "item-content">
         Choice 4
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>
</div>

以上代码将生成以下屏幕：