JSFiddle - React, Tailwind, and code Playground

by ArktekniK

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<label><input name="test2" type="radio">Option 1</label>
<label><input name="test2" type="radio">Option 2</label>
<label><input name="test2" type="radio">Option 3</label>
<br>
<input name="test2" type="radio" class="no-wrapper">Option 4
<input name="test2" type="radio" class="no-wrapper">Option 5
<input name="test2" type="radio" class="no-wrapper">Option 6

JavaScript

// Toggle radio buttons by clicking on the label or radio itself
$('label:has(input[type=radio])').on('mousedown', function(e){
  var radio = $(this).find('input[type=radio]');
  var wasChecked = radio.prop('checked');
  radio[0].turnOff = wasChecked;
  radio.prop('checked', !wasChecked);
});

$('label:has(input[type=radio])').on('click', function(e){
  var radio = $(this).find('input[type=radio]');
  radio.prop('checked', !radio[0].turnOff);
  radio[0]['turning-off'] = !radio[0].turnOff;
});


// Toggle radios by only clicking the radio itself
$('input[type=radio].no-wrapper').on('mousedown', function(e){
	var wasChecked = $(this).prop('checked');
  this.turnOff = wasChecked;
  $(this).prop('checked', !wasChecked);
});

$('input[type=radio].no-wrapper').on('click', function(e){
  $(this).prop('checked', !this.turnOff);
  this['turning-off'] = !this.turnOff;
});