How to uncheck a radio button?

jQuery epiphany and JavaScript enlightenment

To swerve off the checked path with jQuery, look $(this).prop('checked', false) way.

// Employing jQuery's mastery to uncheck
$("input[type="radio"][name="group"]).on("click", function() {
  $(this).prop('checked', false); // Jedi mind trick, radio you are not checked
});


Hint: Always prefer .prop() over .attr() when tampering the 'checked' state in jQuery because prop() is the eyewitness to changes made after loading the DOM, whereas attr() stubbornly holds onto initial DOM values.

Going old school with plain JavaScript, the checked state can be manipulated directly:

// Plain ol' JavaScript, no frills
document.querySelector('input[type="radio"][name="group"]').checked = false; // The Force is weak with this one


A game of radios: unchecking all

To bring about mass destruction of the checked status for all radio buttons in a group, extend your jQuery selector powers:

// The rebellion against all checked radios begins
$("input:radio[name='group']").prop("checked", false); // Checked, you shall not be


Erasing text field memories

In the event you need to simultaneously wipe out text fields, jQuery got your cloak:

// Men in Black moment for all text boxes in a form named 'frm'
$('#frm input[type="text"]').val(""); // Who are you again?


A precision strike with event handling

To achieve accuracy that rivals a Predator drone, assign mousedown events:

// Sharpshooting with mousedown and click events
$("input:radio").on('mousedown', function(){
  var wasChecked = this.checked;
  $(this).one('click', function(){
    if(wasChecked){
      $(this).prop('checked', false); // Omae wa mou shindeiru
      // Translation: You're already unchecked, radio
    }
  });
});


Post-AJAX: The aftermath

Once the hurricane of AJAX has passed, it's time for the cleanup operation a.k.a resetting the form:

// Headquarter for the AJAX cleaning crew
function resetRadioButtons(){
  $("input:radio").prop('checked', false);
  // Additional cleanup operations go here
} // Cleanup on aisle AJAX!


More Sorcery: jQuery plugin, state tracking and more

The creation myth: jQuery plugin

For those wizards who hex forms regularly, consider crafting a jQuery plugin:

// Birth of a jQuery plugin to uncheck radios
$.fn.uncheck = function() {
  return this.prop('checked', false); // Bring forth, the unchecked state!
};

// Summoning the uncheck spell
$('input:radio').uncheck(); // Presto unchecko!


State affairs: Tracking changes

With jQuery, you can remember the state of checked status. Store it using .data() and recall whenever:

// Committing state details to memory
$("input:radio").on('click', function() {
  $(this).data('wasChecked', this.checked);
});

// Take a trip down the memory lane
var wasChecked = $("input:radio").data('wasChecked'); // Those were the days, my friend


The grand unchecking plan

Include all radio buttons and labels in event listeners for unchecking:

// No man is left behind
$("input:radio, label[for='myRadio']").on('click', function() {
  // Unchecking scheme goes here
}); // All for one, one for all


Thinking conditionally with variable tracking

Use a variable to incorporate conditional logic within event handlers:

// A rewarding variable experience
let isRadioChecked = false;

$("input:radio").on('click', function() {
  isRadioChecked = !isRadioChecked;
  if (!isRadioChecked) {
    $(this).prop('checked', false); // CHECKmate!
  }
});
