Ionic2如何仅选择一个复选框并获取选定的复选框值

Question

我有一个屏幕，其中我有20个问答，这些问题将来自DB。因此，我将复选框用于显示选项。到目前为止，我无法找到解决方案。

我需要的是，每个问题只需选中一个复选框的一个复选框。并需要获取所选复选框的值。在这里是我的代码：

在我的中.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个输入字段都具有相同的名称，并且因为它是一个单选按钮，只能选择其中一个。现在，第二个问题将与上面的名称相同。