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

【问题标题】：checkbox becomes unchecked when another checkbox being clicked单击另一个复选框时复选框变为未选中状态
【发布时间】：2021-02-26 18:38:02
【问题描述】：

如果单击单选按钮 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>

【问题讨论】：

标签： html angular checkbox

【解决方案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>

【讨论】：