如何一次選擇一個單選按鈕

在下面的代碼中，我試圖顯示單選按鈕。問題是，當我運行代碼時，有可能同時檢查所有單選按鈕。我想要實作的是一次只能選中一個單選按鈕。換句話說，用戶不能選擇多個單選按鈕，只選擇一個，其余的不選中。請讓我如何調整以下代碼以實作這一目標

代碼

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

uj5u.com熱心網友回復：

單選按鈕按名稱分組，并按其值區分。

所以你基本上必須給它們所有的名字相同但不同的值（例如來自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>

我剛剛洗掉了“名稱”屬性末尾的數字。

uj5u.com熱心網友回復：

所有無線電輸入可能具有相同的名稱屬性。

例如： name="radiogroup1"

uj5u.com熱心網友回復：

那是因為你給了他們不同的names。您的代碼應如下所示：

<div class="modal-body">
  <input value="0" name="areaOfCoverageForThreshold3" type="radio" />
  <label id="threshold-value-3">
    Value 0

  </label>
  <input value="1" name="areaOfCoverageForThreshold3" type="radio" />
  <label id="threshold-value-10">
   Value 1
  </label>
  <input value="2" name="areaOfCoverageForThreshold3" type="radio" />
  <label id="threshold-value-15">
    Value 2
  </label>
</div>

標籤：html css 有角的

上一篇：tf.keras.ConcatenateGraph在連接兩個輸入層時斷開連接

下一篇：讀取父組件傳遞的值