how to select one radio button at a time-CodePudding

in the below code, i am trying to display radio-buttons. the problem is, when i run the code there is possibility to check all the radio-buttons at the same time. what i want to achieve is only one radio button is able to be checked at a time.in other words, the user should not be able to select more than one radio-button, only one is selected and the rest should be unchecked. please let me how to adapt the below code to achive that

code

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

CodePudding user response：

Radio Buttons are grouped by their name and differed by their value.

So you basically have to give all of them the same name but different values (example from 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>

For your case that would look something like this:

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

I just removed the numbers at the end of the "name" attribute.

CodePudding user response：

All the radio inputs may have same name attribute.

For example: name="radiogroup1"

CodePudding user response：

That is because you have given them different names. Your code should look something like this:

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