How to check/uncheck radio button on click?

Question

I want to be able to uncheck a radio button by clicking on it.

So, if a radio button is unchecked, I want to check it, if it is checked, I want to uncheck it.

<

Answer 1

Who those who are seeking for a pure JavaScript solution I modified the code from Jase in ATL's answer.

I wrote this code for proposal of use with a CSS styled 3 position switch which provides 4 state of toggling (On, Off, Neutral and Unactivated).

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: #ffffd;
}

.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;
}

		
		
		





	off
	
	
	neutral
	
	
	on