ionic2 하나의 확인란을 선택하고 선택한 확인란의 값을 얻는 방법

Question

나는 하나의 화면을 가지고 있는데, 여기서 나는 약 20 개의 질문과 답을 가지고 있는데, 이는 db에서 올 것이다. 그래서 나는 쇼 옵션에 체크 박스를 사용한다. 나는 지금까지 해결책을 찾을 수 없었다.

내가 필요한 것은 질문 당 4 개의 확인란 중 하나의 확인란을 선택해야합니다. 선택한 체크 박스의 값을 가져와야합니다. 내 코드는

내 .js 체크 값을 얻으려면 어떻게해야하나요, 체크 옵션에는 하나만 선택해야합니다. 상자.

미리 감사드립니다.

전체 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 개의 입력 필드의 이름이 같은 그것은 라디오 버튼이기 때문에 단지 그들 중 하나가 선택 될 수 있기 때문이다. 이제 두 번째 질문은 다른 이름과 똑같을 것입니다.