ionic2如何只选中一个复选框并获取选中的复选框值

Question

我有一个屏幕，其中有大约 20 个问题和答案，这些问题和答案将来自 db。所以我使用复选框显示选项。直到现在我才找到解决方案。

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

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