单击另一个复选框时，复选框变为未选中状态

Question

如果点击单选按钮id="hangashaYes"，然后点击单选按钮id="personHangashaYeled"，那么第一个选择（id="hangashaYes"）突然变成未选中状态。我错过了什么？

export class Hangasha
{
    isHangasha: number;
    personHangasha : EPerson;
    isMotori : number
    isReiati : number;
    isShmiati: Number;

    constructor()
    {
        this.isHangasha = 0
        this.personHangasha = 0
        this.isMotori = 0;
        this.isReiati = 0;
        this.isShmiati = 0;
    }


}

enum EPerson
{
    None  = 0,
    Hore = 1,
    Yeled = 2
}

        <div class="hangasha">
          <div class="radio-button">
            <label style="margin-left: 30px;" class="control-label">need accessibility?</label>
            <label dir="rtl" class="radio-inline control-label">
              <input id="hangashaNo" type="radio" [(ngModel)]="hangasha.isHangasha" [value]="0">
              <span>No</span>
            </label>
            <label dir="rtl" class="radio-inline control-label">
              <input id="hangashaYes" type="radio" [(ngModel)]="hangasha.isHangasha" [value]="1" >
              <span>Yes</span>
            </label>
          </div>
          <div *ngIf="hangasha.isHangasha==1" class="radio-button"> 
            <label style="margin-left: 30px;" class="control-label">For</label>
            <label dir="rtl" class="radio-inline control-label">
              <input id="personHangashaHore" type="radio" [(ngModel)]="hangasha.personHangasha" [value]="1">
              <span>Parent</span>
            </label>
            <label dir="rtl" class="radio-inline control-label">
              <input id="personHangashaYeled" type="radio" [(ngModel)]="hangasha.personHangasha" [value]="2">
              <span>Child</span>  
            </label>
          </div>
        </div>

Answer 1

Demo您需要为每个单选组添加name。

 <div class="hangasha">
          <div class="radio-button">
            <label style="margin-left: 30px;" class="control-label">need accessibility?</label>
            <label dir="rtl" class="radio-inline control-label">
              <input id="hangashaNo" type="radio"name="hangasha.isHangasha" [(ngModel)]="hangasha.isHangasha" [value]="0">
              <span>No</span>
            </label>
            <label dir="rtl" class="radio-inline control-label">
              <input id="hangashaYes" type="radio"name="hangasha.isHangasha"  [(ngModel)]="hangasha.isHangasha" [value]="1" >
              <span>Yes</span>
            </label>
          </div>
          <div *ngIf="hangasha.isHangasha==1" class="radio-button"> 
            <label style="margin-left: 30px;" class="control-label">For</label>
            <label dir="rtl" class="radio-inline control-label">
              <input id="personHangashaHore" name="hangasha.personHangasha" type="radio" [(ngModel)]="hangasha.personHangasha" [value]="1">
              <span>Parent</span>
            </label>
            <label dir="rtl" class="radio-inline control-label">
              <input id="personHangashaYeled"name="hangasha.personHangasha"  type="radio" [(ngModel)]="hangasha.personHangasha" [value]="2">
              <span>Child</span>  
            </label>
          </div>
        </div>

单击另一个复选框时，复选框变为未选中状态

checkbox becomes unchecked when another checkbox being clicked

html

checkbox

angular