ionic2如何選擇只有一個複選框，並得到所選的複選框的值

Question

我有一個屏幕，我有大約20個問題和答案將來自數據庫。所以我使用複選框顯示選項。直到現在，我還是無法找到解決方案。

我需要的是，我需要檢查每個問題的複選框中只有一個複選框。並需要得到選中的box.here的價值是我的代碼：我的.js我應該需要做的就是選中的值是什麼

，和複選框中檢查的4只選擇一個選擇框。

在此先感謝！

完整的HTML代碼：

<ion-header > 
    <ion-navbar color="navcolr" no-border-bottom> 
    <ion-buttons> 
    <button (click)="canceltap()" style="font-size: 15px;text-transform: none;" ion-button>Cancel 
     </button> 
     </ion-buttons> 
     <ion-title >Mock Test</ion-title> 

     <ion-buttons end> 
      <button ion-button type="submit" (click)="finished()" block> 
      <ion-icon style="font-size: 15px;">Submit</ion-icon> 
      </button> 
     </ion-buttons> 
    </ion-navbar> 
    </ion-header> 

    <ion-content fullscreen> 

     <ion-card *ngFor="let card of subdata"> 

      <ion-item> 
    <div class="item-text-wrap" style="text-align: center;font-weight: 400;font-size: 15px;"> 

     <label>Questions: </label><label class="item-text-wrap" style="color: #303030;">{{card.Question}}</label> 
    </div> 


    <div style="height: 1px;background-color: #696969;margin-left: 4%;margin-right: 4%;margin-top: 3%;"></div> 
    <div style="margin-top: 3%;"> 
     <img src="http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png"> 
    </div> 


      </ion-item> 
      <ion-card-content> 

      <div style="margin-left: 4%;margin-top: 6%;"> 
    <ol id="options" type="A" > 
     <div style="width: 10px;"></div> 
      <li style="margin-top: 5%;"> 
      <label> 
       <input name="question1" type="radio" value="{{card.Answer1}}" required> 
      {{card.Answer1}} 
      </label> 
      </li> 
      <li style="margin-top: 5%;"> 
      <label> 
       <input name="question1" type="radio" value="{{card.Answer2}}"> 
      {{card.Answer2}} 
      </label> 
      </li> 
      <li style="margin-top: 5%;"> 
      <label> 
       <input name="question1" type="radio" value="{{card.Answer3}}"> 
       {{card.Answer3}} 
      </label> 
      </li> 
      <li style="margin-top: 5%;"> 
      <label> 
       <input name="question1" type="radio" value="{{card.Answer4}}" > 
      {{card.Answer4}} 
      </label> 
      </li> 
     </ol> 


    </div> 

    <button ion-button full round id="Ansbtn" (click)="onButtonClick()" [disabled]="!isenabled">View Answer/Description</button> 


    <div class="item-text-wrap" *ngIf="buttonClicked" style="text-align: center;font-weight: 400;font-size: 15px;"> 
    <div style="height: 1px;background-color: #696969;margin-left: 4%;margin-right: 4%;margin-top: 3%;"></div> 

    <label style="color: #303030;">Answer: {{card.CorrectAnswer}}</label><br> 
    <label class="item-text-wrap" style="color: #303030;">Explanations: {{card.AnsDescription}}</label> 
    <div style="height: 1px;background-color: #696969;margin-left: 4%;margin-right: 4%;margin-top: 3%;"></div> 
    </div> 

      </ion-card-content> 
     </ion-card> 

    <div style="height: 10px;background-color: #ededed;"> 

    </div> 
    <div style="height: 30px;text-align: center;" *ngIf="buttonClicked"> 
     <label style="color: red;font-size: 18px;">SCORE: 1</label><br> 
    </div> 

    <div style="height: 30px;background-color: #ededed;"> 

    </div> 



</ion-content> 

Answer 1

我將所有的複選框改變無線電輸入，給予他們相同的名稱和實際值添加到他們。我還爲您的第一個輸入添加了「必需」屬性，因此他們應至少選擇一個單選按鈕。

比方說，這是問題一：

<ol id="options" type="A" > 
    <div style="width: 10px;"></div> 
     <li style="margin-top: 5%;"> 
     <label> 
      <input name="question1" type="radio" value="{{card.Answer1}}" required> 
     {{card.Answer1}} 
     </label> 
     </li> 
     <li style="margin-top: 5%;"> 
     <label> 
      <input name="question1" type="radio" value="{{card.Answer2}}"> 
     {{card.Answer2}} 
     </label> 
     </li> 
     <li style="margin-top: 5%;"> 
     <label> 
      <input name="question1" type="radio" value="{{card.Answer3}}"> 
      {{card.Answer3}} 
     </label> 
     </li> 
     <li style="margin-top: 5%;"> 
     <label> 
      <input name="question1" type="radio" value="{{card.Answer4}}" > 
     {{card.Answer4}} 
     </label> 
     </li> 
    </ol> 

，因爲現在所有這4個輸入字段具有相同的名稱，因爲它是一個單選按鈕，只有一個可以被選中。現在第二個問題將與上面只有一個不同的名稱相同。