Programmatically deselecting a radio button in code

Question

Programmatically deselecting a radio button in code

How can I programmatically uncheck the radio button posted below using TypeScript? I attempted to set the value of averageHeight to false, but that did not result in the radio button being unchecked. Can you please provide guidance on how to achieve this?

HTML:

<div id="idRadioButtonForAverageHeightDivision">
    <input [value]="0" [(ngModel)]="iOperationPasser.averageHeight" name="radioGroupForOperations" type="radio" clrCheckbox  (change)="toggleShowAverageHeight()"  [(checked)]="averageHeight"/>
    <label id="operation-average-height">
        {{ "SITE.AREAS_OF_COVERAGE_FOR_THRESHOLD.OPERATION_AVERAGE_HEIGHT" | 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 typescript radio-button

Answer 1

Answer №1

The standard behavior of the radio input is to remain checked once selected.

To modify its attributes, you can use binding or leverage Angular functionality by accessing the checked property and modifying it accordingly.

For example:

<input type="radio" value="exm" #radio />


// access the input using a local variable in the template
<button (click)="radio.checked=false">
    uncheck
</button>

Alternatively, you can do the following:

<input type="radio" value="exm" [checked]="term" />


// this will toggle the checked status on click
<button (click)="toggle()">
    uncheck
</button>


TS FILE ----------------------
public term: boolean = false

toggle(){
  this.term = !this.term

}

If you need to access the value property, the process remains similar:

<input type="radio" [value]="value" />


TS FILE ----------------------
// any changes to the value will reflect in the template. ngModel is not useful for non-text inputs.
public value: string = 'Value here'

Answer 2

The standard behavior of the radio input is to remain checked once selected.

To modify its attributes, you can use binding or leverage Angular functionality by accessing the checked property and modifying it accordingly.

For example:

<input type="radio" value="exm" #radio />


// access the input using a local variable in the template
<button (click)="radio.checked=false">
    uncheck
</button>

Alternatively, you can do the following:

<input type="radio" value="exm" [checked]="term" />


// this will toggle the checked status on click
<button (click)="toggle()">
    uncheck
</button>


TS FILE ----------------------
public term: boolean = false

toggle(){
  this.term = !this.term

}

If you need to access the value property, the process remains similar:

<input type="radio" [value]="value" />


TS FILE ----------------------
// any changes to the value will reflect in the template. ngModel is not useful for non-text inputs.
public value: string = 'Value here'

Programmatically deselecting a radio button in code

Answer №1

Similar questions

Curvature Factor equals Overflow of Color

The 'isMounted' property is not found in the 'ErrorBoundary' type

Choosing from a Variety of Options from a Dropdown Menu

Creating a full-width row and columns layout using CSS Flex Box styling

Ways to retrieve the following angular.callbacks.counter within angular2

Nest.js: initializing properties from a superclass in a controller

Angular mat-form-field not accepting placeholder value

Electron encountered an error while attempting to deserialize cloned data because of an invalid or unsupported version

What steps do I need to take to ensure my TypeScript module in npm can be easily used in a

Making changes to a specific row in a datatable within a Flask project

Utilizing a Bootstrap column design with two columns in place - one column set at a fixed width while the second column stretches across the remaining

Assistance with Parallax Mouse Movement, Using JQuery, HTML, and CSS

Adding a JQuery Plugin to Brunch 2.8

Utilizing media queries and page width in a Moodle theme designed with Bootstrap framework

How can I create an HTML link that opens a drop-down menu with form functionality?

Having issues with CSS vertical margin not functioning properly

Can an application be developed with OAuth2 that is role-based?

Guide on calculating the total of an object's attributes in Angular

When there are additional parameters following .../foo.png/, the Img-src does not properly resolve the URL

Tapping on the emphasized hyperlink within an unorganized roster