How to make a radio button unchecked by clicking it?
You can set HTML object's property checked to false like this:
document.getElementById('desiredInput').checked = false;Examples
Plain JavaScript:var radios = document.getElementsByTagName('input');for(i=0; i<radios.length; i++ ) { radios[i].onclick = function(e) { if(e.ctrlKey || e.metaKey) { this.checked = false; } }}<input type="radio" name="test" value="1" /><input type="radio" name="test" value="2" checked="checked" /><input type="radio" name="test" value="3" />jQuery:$('input').click(function(e){ if (e.ctrlKey || e.metaKey) { $(this).prop('checked', false); }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="radio" name="test" value="1" /><input type="radio" name="test" value="2" checked="checked" /><input type="radio" name="test" value="3" />Hold down Ctrl (⌘ on mac) key to uncheck.
Radio buttons are meant to be used in groups, as defined by their sharing the same name attribute. Then clicking on one of them deselects the currently selected one. To allow the user to cancel a “real” selection he has made, you can include a radio button that corresponds to a null choice, like “Do not know” or “No answer”.
If you want a single button that can be checked or unchecked, use a checkbox.
It is possible (but normally not relevant) to uncheck a radio button in JavaScript, simply by setting its checked property to false, e.g.
<input type=radio name=foo id=foo value=var><input type=button value="Uncheck" onclick="document.getElementById('foo').checked = false">
This is my answer (though I made it with jQuery but only for the purpose of selecting elements and to add and remove a class, so you can easily replace it with pure JS selectors & pure JS add attribute )
<input type='radio' name='radioBtn'><input type='radio' name='radioBtn'><input type='radio' name='radioBtn'>$(document).on("click", "input[name='radioBtn']", function(){ thisRadio = $(this); if (thisRadio.hasClass("imChecked")) { thisRadio.removeClass("imChecked"); thisRadio.prop('checked', false); } else { thisRadio.prop('checked', true); thisRadio.addClass("imChecked"); };})