Angular 单击其他单选按钮时取消选中复选框

此代码中有两个单选按钮，每个单选按钮包含一些信息，但在第一个单选按钮中有一个复选框，即input type=“checkbox”所以问题是，如果我点击第一个单选按钮，在里面我也点击复选框，它可以正常工作，但是当我点击其他单选按钮时，复选框应该被取消选中。同样，当我点击第一个单选按钮时，复选框应该被取消选中，直到我点击它

<div>
  <div>
    <label class="custom-control custom-radio">
      <input class="custom-control-input" name="isConcessionApplied" type="radio" [checked]="true"
        (click)="setIsConcessionApplied(true)" />
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Apply Concession</span>
      <tc-icon [color]="['#df4b33','#df4b33']" name="discount"></tc-icon>
    </label>
  </div>
  <div class="pl-5">
    <div *ngFor="let list of concessionsApplicable; let i=index">
      <label class="ml-0 mr-0 mt-1 c-checkbox-container" style="font-size: 16px"
        [ngClass]="!!concessionsApplicable.isConcessionApplied ? '' : 'disabled'">
        <label class="m-0" style="font-size: 14px">{{list?.name}}</label>
        <input [(ngModel)]="list.isChecked" [ngModelOptions]="{standalone: true}" name="options_{{i}}" type="checkbox"
          (ch) value="true">
        <span class="checkmark"></span>
      </label>
      <small *ngIf="list?.description" style="margin-left: 28px"
        class="text-muted help-block pb-3">{{list?.description}}
      </small>
      <div class="input-group" style="margin-left: 28px; padding-top: 8px">
        <input class="form-control" disabled placeholder={{list?.amount}} type="text" />
      </div>
      <div>
        <div class="row input-group" style="margin-left: 28px">
          <div class="col-md-6 pl-0">
            <div class="form-group">
              <label class="text-muted" for="leasestart">Start
                Date</label>
              <div class="input-group">
                <input class="form-control" disabled placeholder={{list?.applicableFrom}} type="text" />
              </div>
            </div>
          </div>
          <div class="col-md-6 pr-0">
            <div class="form-group">
              <label class="text-muted" for="leasestart">End Date</label>
              <div class="input-group">
                <input class="form-control" disabled placeholder={{list?.applicableTo}} type="text" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div>
      <label class="custom-control custom-radio">
        <input class="custom-control-input" name="isConcessionApplied" type="radio"
          (click)="setIsConcessionApplied(false)" />
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">No Concession</span>
        <tc-icon [color]="['#9b9b9b','#9b9b9b']" name="discount">
        </tc-icon>
      </label>
    </div>
    <div *ngIf="!!concessionsApplicable" class="pl-5">
      <ng-select [clearable]="false" bindLabel="friendlyName" bindValue="id" appendTo="body" placeholder="Select reason"
        [items]="noConcessionReasons" [searchable]="false" [(ngModel)]="concessionsApplicable.noConcession"
        [ngModelOptions]="{standalone: true}" class="global-dropdown"
        [ngClass]="!!concessionsApplicable.isConcessionApplied ? 'disabled' : ''">
      </ng-select>
      <div *ngIf="isNoConcessionReasonReq === true">
        <small class="text-danger">Required input</small>
      </div>
    </div>
  </div>
</div>

让步
{{list？.name}
{{list？.description}}
开始
日期
结束日期
不让步
所需输入

您可以在.ts文件中写入重置逻辑复选框。在下面的代码中，性别基本上是您的单选按钮值，您可以在男性和女性之间切换，并根据该复选框的值重置

.ts文件

.html文件

男性

输入年龄



女性

---

工作演示：

您可以使用无线输入的ngModelChange事件选中或取消选中复选框-

<div>
    <input type="radio" name="radio" value="radio1" [(ngModel)]="radio" 
      (ngModelChange)="change()">Radio1<br>
    <input style="margin-left:25px;" type="checkbox" name="checkbox" value="checkbox1" 
      [(ngModel)]="isCheckBox">Checkbox<br>
</div>
<br>
    <input type="radio" name="radio" value="radio2" [(ngModel)]="radio" 
     (ngModelChange)="change()">Radio2<br>

---

代码很混乱，你能提供stackblitz演示吗？我/我们可以在哪里复制相同的问题？就这样,

<div style="display:flex;">
<input type="radio" name="gender" value="male" [(ngModel)]="gender" (ngModelChange)="changeHandler()" checked> Male<br>
   <input style="margin-left:20px;" type="checkbox" name="vehicle" value="Bike" [(ngModel)]="checkboxValue"> enter age<br>
</div>
 <br>
 <input type="radio" name="gender" value="female" [(ngModel)]="gender" (ngModelChange)="changeHandler()"> Female<br>

<div>
    <input type="radio" name="radio" value="radio1" [(ngModel)]="radio" 
      (ngModelChange)="change()">Radio1<br>
    <input style="margin-left:25px;" type="checkbox" name="checkbox" value="checkbox1" 
      [(ngModel)]="isCheckBox">Checkbox<br>
</div>
<br>
    <input type="radio" name="radio" value="radio2" [(ngModel)]="radio" 
     (ngModelChange)="change()">Radio2<br>

radio = '';
isCheckBox = false;
change():void{
      this.isCheckBox = false;
  }