How to clear radio button in Javascript?

JavascriptHtml

Javascript Problem Overview


I have a radio button named "Choose" with the options yes and no. If I select any one of the options and click the button labeled "clear", I need to clear the selected option, using javascript. How can I accomplish that?

Javascript Solutions


Solution 1 - Javascript

You don't need to have unique id for the elements, you can access them by their name attribute:

If you're using name="Choose", then:

  • With jQuery it is as simple as:

    $('input[name=Choose]').attr('checked',false);
    

  • or in pure JavaScript:

    var ele = document.getElementsByName("Choose");
    for(var i=0;i<ele.length;i++)
    ele[i].checked = false;
    

Demo for JavaScript

Solution 2 - Javascript

If you do not intend to use jQuery, you can use simple javascript like this

document.querySelector('input[name="Choose"]:checked').checked = false;

Only benefit with this is you don't have to use loops for two radio buttons

Solution 3 - Javascript

This should work. Make sure each button has a unique ID. (Replace Choose_Yes and Choose_No with the IDs of your two radio buttons)

document.getElementById("Choose_Yes").checked = false;
document.getElementById("Choose_No").checked = false;

An example of how the radio buttons should be named:

<input type="radio" name="Choose" id="Choose_Yes" value="1" /> Yes
<input type="radio" name="Choose" id="Choose_No" value="2" /> No

Solution 4 - Javascript

An ES6 approach to clearing a group of radio buttons:

	Array.from( document.querySelectorAll('input[name="group-name"]:checked'), input => input.checked = false );

Solution 5 - Javascript

Wouldn't a better alternative be to just add a third button ("neither") that will give the same result as none selected?

Solution 6 - Javascript

In my case this got the job done:

const chbx = document.getElementsByName("input_name");

for(let i=0; i < chbx.length; i++) {
    chbx[i].checked = false;
}

Solution 7 - Javascript

YES<input type="radio" name="group1" id="sal" value="YES" >

NO<input type="radio" name="group1" id="sal1" value="NO" >

<input type="button" onclick="document.getElementById('sal').checked=false;document.getElementById('sal1').checked=false">

Solution 8 - Javascript

Simple, no jQuery required:

<a href="javascript:clearChecks('group1')">clear</a>

<script type="text/javascript">
function clearChecks(radioName) {
	var radio = document.form1[radioName]
	for(x=0;x<radio.length;x++) {
		document.form1[radioName][x].checked = false
	}
}

</script>

Solution 9 - Javascript

if the id of the radio buttons are 'male' and 'female', value reset can be done by using jquery

$('input[id=male]').attr('checked',false);
$('input[id=female]').attr('checked',false);

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questioni2ijeyaView Question on Stackoverflow
Solution 1 - JavascriptNVRAMView Answer on Stackoverflow
Solution 2 - Javascriptshriroop_View Answer on Stackoverflow
Solution 3 - JavascriptShawn StewardView Answer on Stackoverflow
Solution 4 - JavascriptwLcView Answer on Stackoverflow
Solution 5 - JavascriptJasper De BruijnView Answer on Stackoverflow
Solution 6 - JavascriptAvag SargsyanView Answer on Stackoverflow
Solution 7 - JavascriptSalilView Answer on Stackoverflow
Solution 8 - JavascriptDiodeus - James MacFarlaneView Answer on Stackoverflow
Solution 9 - JavascriptVishnu SView Answer on Stackoverflow