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

我会将所有复选框更改为无线电输入，为它们提供相同的名称并为它们添加实际值。我还添加了＆＃34; required＆＃34;属于你的第一个输入，所以他们应该至少选择一个单选按钮。

让我们说这是问题一：

<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>

现在因为所有这四个输入字段具有相同的名称，并且因为它是一个单选按钮，所以只能选择其中一个。现在第二个问题与上面的问题完全相同。

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

1 个答案: