如何在点击时选中/取消选中单选按钮？

function toggle_radio(ev) {
	var radio = ev.target;
	var cut_pos = radio.className.indexOf(' switcher-active');

	// the switch itself
	if (cut_pos !== -1) { // if the button checked it is '.switcher-active'
		radio.checked = false; // toggle its state
		radio.className = radio.className.slice(0, cut_pos); // remove '.switcher-active'
		return true; // work is done. Break the function
	}

	// the button was inactive before it was clicked. Then it should became '.switcher-active'
	radio.className = radio.className + ' switcher-active';

	// we need to remove '.switcher-active' if either the left or right radio button was clicked. This part is uggly but I don't bother, because I'm late for barber
	var radios = document.getElementsByName(radio.name); // get all these radio siblings as a collection of elements
	for (var i=0; i < radios.length; i++) { // iterate through the collection
		if (radios[i].className.indexOf('switcher-radio-neutral') !== -1)
			continue; // skip the '.switcher-neutral' radio input

		radios[i].onclick = function(ev2) {
			sib_radios = document.getElementsByName(ev2.target.name); // get a group of radio inputs linked by the name

			// get the '.switcher-neutral'
			for (var k=0, cut_pos = -1, sib; k < sib_radios.length; k++) {
				sib = sib_radios[k];
				cut_pos = sib.className.indexOf(' switcher-active');
				if (cut_pos !== -1)
					sib.className = sib.className.slice(0, cut_pos);
			}
		}
	}
}

var switchers = document.getElementsByClassName('switcher-radio-neutral');

for (var i=0; i < switchers.length; i++) { // bind onclick handlers
	switchers[i].onclick = toggle_radio;
}

.switcher {
	position: relative;
	display: inline-block;
	margin: 1px 10px;
	height: 20px;
	width: 58px;
	z-index: 1;
}

.switcher-off {
	left: 1px;
	width: 33%;
	height: 100%;
}

.switcher-neutral {
	left: 33%;
	width: 33%;
	height: 100%;
}

.switcher-on{
	right: 1px;
	width: 33%;
	height: 100%;
}

.switcher-label {
	position: absolute;
	text-indent: -9999px;
	z-index: 2;
}

.switcher input {
	visibility: hidden;
	position: absolute;
}

.switcher-slider {
	height: 100%;
	width: 100%;
	border-radius: 10px;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) inset, 0 0 4px rgba(0, 0, 0, 0.5) inset, 0 2px 2px 1px rgba(0, 0, 0, 0.3) inset;
	transition: background-color 0.2s linear 0s;
}

.switcher-slider:after {
	transition: left 0.2s linear 0s, right 0.2s linear 0s;
	background: linear-gradient(#D0D0D0, #FDFDFD) repeat scroll 0 0 rgba(0, 0, 0, 0);
	content: "";
	position: absolute;
	top: 1px;
	border-radius: 50%;
	height: calc(100% - 2px);
	width: calc(100%/3 - 1px);
	box-shadow: 0 0 1px 1px #f4f4f4 inset, 0 0 3px 1px rgba(0, 0, 0, 0.6);
	left: 33%;
}

.switcher-radio-on:checked  ~ .switcher-slider {
	background-color: #81EA89;
}

.switcher-radio-neutral:checked  ~ .switcher-slider {
	background: #ddd;
}

.switcher-radio-off:checked  ~ .switcher-slider {
	background-color: #ED8282;
}

.switcher-radio-on:checked  ~ .switcher-slider:after {
	left: calc(2*(100%/3));
}

.switcher-radio-neutral:checked  ~ .switcher-slider:after {
	left: calc(1px + 100%/3);
}

.switcher-radio-off:checked  ~ .switcher-slider:after {
	left: 1px;
}

<form action="">
		<input type="radio" name="radio_input" value="1">
		<input type="radio" name="radio_input" class="switcher-radio-neutral" value="2">
		<input type="radio" name="radio_input" value="3">
</form>
<br><br>
<div class="switcher">
	<label  class='switcher-label switcher-off' for='off'>off</label>
	<input id='off' class='switcher-radio-off' type='radio' name='value' value='off'>
	
	<label class='switcher-label switcher-neutral' for='neutral'>neutral</label>
	<input id='neutral' class='switcher-radio-neutral' type='radio' name='value' value='neutral' data-neutral="">
	
	<label class='switcher-label switcher-on' for='on'>on</label>
	<input id='on' class='switcher-radio-on' type='radio' name='value' value='on'>
	<div class='switcher-slider'></div>
</div>

document.querySelectorAll(
    'input[type=radio][name=foo]').forEach((elem) => {
  elem.addEventListener('click', allowUncheck);
  // only needed if elem can be pre-checked
  elem.previous = elem.checked;
});

function allowUncheck(e) {
  if (this.previous) {
    this.checked = false;
  }
  // need to update previous on all elements of this group
  // (either that or store the id of the checked element)
  document.querySelectorAll(
      `input[type=radio][name=${this.name}]`).forEach((elem) => {
    elem.previous = elem.checked;
  });
}

body { font-size: xx-large; }
label, input {
  /* added because a second click to unselect radio often
     appears as a double click to select text */
  -webkit-user-select: none;
  user-select: none;
}

<input type="radio" name="foo" id="foo1"><label for="foo1">foo1</label>
<input type="radio" name="foo" id="foo2"><label for="foo2">foo2</label>
<input type="radio" name="foo" id="foo3"><label for="foo3">foo3</label>

function makeRadioboxGroupUnCheckable(groupSelector) {

  let currentId;

  document.querySelectorAll(groupSelector).forEach((elem) => {
    elem.addEventListener('click', allowUncheck);
    // only needed if can be pre-checked
    if (elem.checked) {
      currentId = elem.id;
    }
  });

  function allowUncheck(e) {
    if (this.id === currentId) {
      this.checked = false;
      currentId = undefined;
    } else {
      currentId = this.id;
    }
  }
}

makeRadioboxGroupUnCheckable('input[type=radio][name=foo]');

body { font-size: xx-large; }
label, input {
  /* added because a second click to unselect radio often
     appears as a double click to select text */
  -webkit-user-select: none;
  user-select: none;
}

<input type="radio" name="foo" id="foo1"><label for="foo1">foo1</label>
<input type="radio" name="foo" id="foo2"><label for="foo2">foo2</label>
<input type="radio" name="foo" id="foo3"><label for="foo3">foo3</label>

label > input:checked,
label > input:checked + label {
    pointer-events: none;
}

#unselect {
    display: none;   
}

<input type="radio" name="foo" id="unselect">
<label for="unselect">
  <input type="radio" name="foo" id="foo1">
  <label for="foo1">foo1</label>
  <input type="radio" name="foo" id="foo2">
  <label for="foo2">foo2</label>
  <input type="radio" name="foo" id="foo3">
  <label for="foo3">foo3</label>
</label>

input:not([id^=foo]) {
  opacity: 0.0;
}
input[id^=foo]:checked {
  position: absolute;
}
input[id^=foo]:not(:checked) + input {
  display: none;
}

<input type="radio" name="foo" id="foo1">
<input type="radio" name="foo">
<label for="foo1">foo1</label>
<input type="radio" name="foo" id="foo2">
<input type="radio" name="foo">
<label for="foo2">foo2</label>
<input type="radio" name="foo" id="foo3">
<input type="radio" name="foo">
<label for="foo3">foo3</label>

Parent.onclick = e => {
  rb = e.target;
  if (rb.type == "radio") {
    if (Parent.rb == rb) {
      rb.checked = false;
      Parent.rb = null;
    } else {
      Parent.rb = rb
    }
  }
}

<div id="Parent">
  <input type="radio" name="foo" id="foo1">
  <label for="foo1">foo1</label>
  <input type="radio" name="foo" id="foo2">
  <label for="foo2">foo2</label>
  <input type="radio" name="foo" id="foo3">
  <label for="foo3">foo3</label>
</div>