Ionic - 单选按钮

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

添加单选按钮

由于总是有多个单选按钮可供选择，因此最好的方法是创建一个列表。每当我们想要多个元素时，我们都会这样做。列表项类将是 item-radio。同样，我们将使用 label 来实现这一点，就像我们在所有其他表单中使用过的那样。输入将具有 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>

上述代码将在屏幕产生以下内容 −