Ionic - 单选按钮

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

添加单选按钮

由于总是有多个单选按钮可供选择，因此最好的方法是创建一个列表。每当我们需要多个元素时，我们都会这样做。列表项类将为item-radio。同样，我们将为此使用标签，就像我们在所有其他表单中使用的那样。输入将具有名称属性。此属性会将您想要使用的所有按钮分组为可能的选择。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>

上面的代码将产生以下屏幕 -

离子单选按钮组