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>

以上程式碼將生成以下螢幕：