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

Question

在此代码中，有两个单选按钮，每个单选按钮都包含一些信息，但在第一个单选按钮中有一个复选框，即 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>

Answer 1

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

.ts 文件

checkboxValue = false;
changeHandler(){
    console.log(this.gender);
    if(this.gender == 'male'){
      this.checkboxValue = false;
    }
    else if(this.gender == 'female'){
      this.checkboxValue = false;
    }
  }

.html 文件

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

工作演示：demo

Answer 2

您可以使用无线电输入的 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>

你的逻辑将是 -

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