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个输入字段具有相同的名称，因为它是一个单选按钮，只有一个可以被选中。现在第二个问题将与上面只有一个不同的名称相同。