JSFiddle - React, Tailwind, and code Playground

by greatalf

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Uncheck radio button</title>
</head>
<body>

    <input type="radio" name="options" value="option1" id="option1">
    <label for="option1">Option 1</label><br>

    <input type="radio" name="options" value="option2" id="option2">
    <label for="option2">Option 2</label><br>

    <input type="radio" name="options" value="option3" id="option3">
    <label for="option3">Option 3</label><br>
    
</body>
</html>

JavaScript

$('label').click(function(e) {
  e.preventDefault()

  var inputId = '#' + $(this).attr("for");
  if( $(inputId).prop("checked") === true )
  {
    $(inputId).prop("checked", false);
  }
  else {
    $(inputId).prop("checked", true);
  }
});
$('input[type="radio"]').on('click', function(e) {
  e.preventDefault()
})
$('input[type="radio"]').on('mousedown', function(e) {

  if( $(this).prop("checked") === true )
  {
    $(this).prop("checked", false);
  }
  else {
    $(this).prop("checked", true);
  }
});
$('input[type="radio"]').on('mouseup', function(e) {

  if( $(this).prop("checked") === false )
  {
    $(this).prop("checked", false);
  }
});