Ionic单选按钮

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

添加单选按钮

由于总会有多个单选按钮可供选择，最好的方法是创建一个列表。每当我们想要多个元素时，我们就这样做 列表项类将是 item-radio 。同样，我们将使用 标签 ，因为我们已经使用了所有其他形式。输入将具有 name 属性。此属性将组合您要用作可能选项的所有按钮。该 项目内容 类是用来清晰地显示选项。最后，我们将使用 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>

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

Ionic电台按钮

多个单选按钮组

有时您想要创建多个组。这就是 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>

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

Ionic单选按钮组