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
<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>Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
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.
Method 2
All the radio inputs may have same name attribute.
For example: name="radiogroup1"
Method 3
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>All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0