Choosing a single radio button is simple with these steps

Question

Choosing a single radio button is simple with these steps

Trying to display radio-buttons in the code below, but encountering an issue where all radio-buttons can be checked simultaneously. The desired functionality is to only allow one radio button to be checked at a time, preventing the selection of multiple options. Would appreciate guidance on how to modify the code to achieve this.

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

html css angular

Answer 1

Answer №1

Radio Buttons are grouped together based on their name attribute and differentiated by their respective values.

To correctly group them, you need to assign the same name but unique values to each radio button element. An example from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio demonstrates this:

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

A similar structure for your case would be:

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

The only modification made was to remove the numbers from the end of the "name" attribute for each radio button.

Answer 2

Radio Buttons are grouped together based on their name attribute and differentiated by their respective values.

To correctly group them, you need to assign the same name but unique values to each radio button element. An example from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio demonstrates this:

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

A similar structure for your case would be:

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

The only modification made was to remove the numbers from the end of the "name" attribute for each radio button.

Answer 3

Answer №2

It appears that the issue lies in the different names you have assigned. Here is an example of how your code should be structured:

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

Answer 4

It appears that the issue lies in the different names you have assigned. Here is an example of how your code should be structured:

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

Answer 5

Answer №3

It is possible for all radio inputs to share the same name attribute.

For instance: name="group1"

Answer 6

It is possible for all radio inputs to share the same name attribute.

For instance: name="group1"

Choosing a single radio button is simple with these steps

Answer №1

Answer №2

Answer №3

Similar questions

A single element containing two duplicates of identical services

Position the center of an Angular Material icon in the center

I am encountering a continuous css ParserError while trying to compile my react project

There seems to be an issue with the functionality of the JavaScript Quiz as it is

Adding a Header Image to the Top of All Pages with CSS

The footer that constantly changes

Bootstrap CSS flexibly decreases the size of the input field on the form

Guidelines for incorporating Dropdown menus in a Multi-level Carousel themed SideNav using Angular 5 Material

Anchor checkboxes

MediaRecorder is not compatible with Protractor unit tests in Angular

Using the Javascript function getElementById to retrieve user input for passing a RSS FeedURL

Setting up your Angular2-Typescript application to run smoothly in VS Code

Creating a customizable navigation bar using only CSS

Angular9 integrated with Firebase to enhance the capabilities of

Validation of default values in contact forms

Is it possible to assign the margin-bottom property of one element to be equal to the dynamic height of a sibling element?

Video posters can now feature a sleek black border to enhance the

Creating an app for sending text messages and making video calls with Spring Boot technology

Utilizing JQuery to modify CSS in a partial view

Toggle visibility of an Angular 4 component based on the current route