JSFiddle - React, Tailwind, and code Playground

Make radios deselectable by name

by Joe Cisneros

HTML

<div>
    Deselectable Radio: <input type="radio" name="foo"  />
</div>
<div>
    Deselectable Radio 2: <input type="radio" name="foo"/>
</div>
<div>
    Deselectable Radio 3: <input type="radio" name="foo" checked/> <!-- Works only after two clicks if already checked :-/ -->
</div>
<br>
Credit: <a href="https://stackoverflow.com/questions/6191621/jquery-check-uncheck-radio-button-onclick/6191732#6191732">https://stackoverflow.com/questions/6191621/jquery-check-uncheck-radio-button-onclick/6191732#6191732</a>

JavaScript

var makeRadiosDeselectableByName = function(name){
    $('input[name=' + name + ']').click(function() {
        if($(this).attr('prevChecked') == true){
            $(this).attr('checked', false)
        } else {
            $('input[name=' + name + ']').attr('prevChecked', false);
        }
        
        $(this).attr('prevChecked', $(this).attr('checked'));
    });
};


makeRadiosDeselectableByName('foo');