如何一次选择一个单选按钮

Question

在下面的代码中，我试图显示单选按钮。问题是，当我运行代码时，有可能同时检查所有单选按钮。我想要实现的是一次只能选中一个单选按钮。换句话说，用户不应该能够选择多个单选按钮，只能选择一个，其余的应取消选中。请让我如何调整下面的代码来实现这一目标

<div class="modal-body">
  <input [value]="0" [(ngModel)]="areaOfCoverageForThreshold3" name="areaOfCoverageForThreshold3" type="radio" (change)="toggleShowAreaOfCoverageWithThreshold3()" [(checked)]="showAreaOfCoverageForThreshold3" />
  <label id="threshold-value-3">
    {{ "SITE.AREA_OF_COVERAGE_FOR_THRESHOLD_3" | translate }}
    <button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_DIST_4_AGRI')">
      <clr-icon shape="help-info" class="is-solid"></clr-icon>
    </button>
  </label>
  <input [value]="1" [(ngModel)]="areaOfCoverageForThreshold10" name="areaOfCoverageForThreshold10" type="radio" (change)="toggleShowAreaOfCoverageWithThreshold10()" [(checked)]="showAreaOfCoverageForThreshold10" />
  <label id="threshold-value-10">
    {{ "SITE.AREA_OF_COVERAGE_FOR_THRESHOLD_10" | translate }}
    <button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_DIST_4_AGRI')">
      <clr-icon shape="help-info" class="is-solid"></clr-icon>
    </button>
  </label>
  <input [value]="2" [(ngModel)]="areaOfCoverageForThreshold15" name="areaOfCoverageForThreshold15" type="radio" (change)="toggleShowAreaOfCoverageWithThreshold15()" [(checked)]="showAreaOfCoverageForThreshold15" />
  <label id="threshold-value-15">
    {{ "SITE.AREA_OF_COVERAGE_FOR_THRESHOLD_15" | translate }}
    <button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_DIST_4_AGRI')">
      <clr-icon shape="help-info" class="is-solid"></clr-icon>
    </button>
  </label>
  <input [value]="3" [(ngModel)]="areaOfCoverageForThreshold20" name="areaOfCoverageForThreshold20" type="radio" (change)="toggleShowAreaOfCoverageWithThreshold20()" [(checked)]="showAreaOfCoverageForThreshold20" />
  <label id="threshold-value-20">
    {{ "SITE.AREA_OF_COVERAGE_FOR_THRESHOLD_20" | translate }}
    <button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_DIST_4_AGRI')">
      <clr-icon shape="help-info" class="is-solid"></clr-icon>
    </button>
  </label>
</div>

Answer 1

单选按钮按其名称分组并按其值进行区分。

因此，您基本上必须为它们提供相同的名称但不同的值（示例来自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio）：

<div>
  <input type="radio" id="huey" name="drone" value="huey" checked>
  <label for="huey">Huey</label>
</div>

<div>
  <input type="radio" id="dewey" name="drone" value="dewey">
  <label for="dewey">Dewey</label>
</div>

<div>
  <input type="radio" id="louie" name="drone" value="louie">
  <label for="louie">Louie</label>
</div>

对于你的情况，看起来像这样：

<div class="modal-body">
  <input [value]="0" [(ngModel)]="areaOfCoverageForThreshold3" name="areaOfCoverageForThreshold" type="radio" (change)="toggleShowAreaOfCoverageWithThreshold3()" [(checked)]="showAreaOfCoverageForThreshold3" />
  <label id="threshold-value-3">
    {{ "SITE.AREA_OF_COVERAGE_FOR_THRESHOLD_3" | translate }}
    <button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_DIST_4_AGRI')">
      <clr-icon shape="help-info" class="is-solid"></clr-icon>
    </button>
  </label>
  <input [value]="1" [(ngModel)]="areaOfCoverageForThreshold10" name="areaOfCoverageForThreshold" type="radio" (change)="toggleShowAreaOfCoverageWithThreshold10()" [(checked)]="showAreaOfCoverageForThreshold10" />
  <label id="threshold-value-10">
    {{ "SITE.AREA_OF_COVERAGE_FOR_THRESHOLD_10" | translate }}
    <button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_DIST_4_AGRI')">
      <clr-icon shape="help-info" class="is-solid"></clr-icon>
    </button>
  </label>
  <input [value]="2" [(ngModel)]="areaOfCoverageForThreshold15" name="areaOfCoverageForThreshold" type="radio" (change)="toggleShowAreaOfCoverageWithThreshold15()" [(checked)]="showAreaOfCoverageForThreshold15" />
  <label id="threshold-value-15">
    {{ "SITE.AREA_OF_COVERAGE_FOR_THRESHOLD_15" | translate }}
    <button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_DIST_4_AGRI')">
      <clr-icon shape="help-info" class="is-solid"></clr-icon>
    </button>
  </label>
  <input [value]="3" [(ngModel)]="areaOfCoverageForThreshold20" name="areaOfCoverageForThreshold" type="radio" (change)="toggleShowAreaOfCoverageWithThreshold20()" [(checked)]="showAreaOfCoverageForThreshold20" />
  <label id="threshold-value-20">
    {{ "SITE.AREA_OF_COVERAGE_FOR_THRESHOLD_20" | translate }}
    <button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_DIST_4_AGRI')">
      <clr-icon shape="help-info" class="is-solid"></clr-icon>
    </button>
  </label>
</div>

我刚刚删除了“名称”属性末尾的数字。