How to uncheck a radio button when another is checked

Today we are going to talk about how to uncheck a radio button when another radio button is checked using JavaScript. This can be useful if you want to give your users the option to select one option from multiple options.

Uncheck a radio button when another is checked in JS. #

In the first step, we will create two radio buttons with different values.

 <input type="radio" id="male" value="Male"> Male<br>
 <input type="radio" id="female" value="Female"> Female<br>

Next, we need to add the onclick attribute that will contain the javascript code.

 <input onclick="document.querySelector('#female').checked=false" type="radio" id="male" value="Male"> Male<br>
 <input onclick="document.querySelector('#male').checked=false" type="radio" id="female" value="Female"> Female<br>

The above example will ensure that when the Male option is clicked, it will automatically uncheck the Female option.

Uncheck a radio button when another is checked using pure HTML. #

You don't need to use JavaScript to uncheck a radio button when another is checked. Include the name attribute and give a same name to all the radio buttons.

 <input type="radio" name="gender" value="Male"> Male<br>
 <input type="radio" name="gender" value="Female"> Female<br>