Toggle Radio Button using jQuery

Radio buttons are not built to toggle on and off. You can toggle radio button using jQuery with the help of HTML5 Data Attribute. It is very easy to store previous value of radio button and use it to toggle radio button inside the click event of radio button.

$(document).ready(function() {
  $("input[type=radio]").click(function() {
    // Get the storedValue
    var previousValue = $(this).data('storedValue');
    // if previousValue = true then
    //     Step 1: toggle radio button check mark.
    //     Step 2: save data-StoredValue as false to indicate radio button is unchecked.
    if (previousValue) {
      $(this).prop('checked', !previousValue);
      $(this).data('storedValue', !previousValue);
    }
    // If previousValue is other than true
    //    Step 1: save data-StoredValue as true to for currently checked radio button.
    //    Step 2: save data-StoredValue as false for all non-checked radio buttons. 
    else{
      $(this).data('storedValue', true);
      $("input[type=radio]:not(:checked)").data("storedValue", false);
    }
  });
});
  

Explanation of Toggle Radio Button using jQuery Code

HTML5 added a new data-* attribute to add custom attributes to HTML elements and it will be a valid HTML mark up. The trick to above code is storing value in data-storedValue . When radio button is clicked, we can access data-storedValue as previous value of radio button.

<input type="radio" name="chooseYes" value="yes"> Yes </input>
  

$("input[type=radio]").data("storedValue", true) will modify above snippet as below. You can access stored value as $("input[type=radio]").data("storedValue")

<input type="radio" name="chooseYes" value="yes" data-storedValue="true"> Yes </input>
  

Live Demo for Toggle Radio Button using jQuery Code

See the Pen Toggle Radio Button using jQuery by Hiral Patel (@hiralbest) on CodePen.