Simu radio button group

radio button group test

by roge roge

HTML

<h1> Test radio button group</h1>
<button class="roundRadio" onclick="buttonClick(this, 'Selected');" name="Radio" > opt 1 </button>
<button class="roundRadio Selected" onclick="buttonClick(this, 'Selected');" name="Radio" >  opt 2 </button>
<button class="roundRadio" onclick="buttonClick(this, 'Selected');" name="Radio" > opt 3 </button>
<button class="roundRadio" onclick="buttonClick(this, 'Selected');" name="Radio" >  opt 4 </button>

CSS

.roundRadio  {
	margin: 0 0px 0 0px;
	padding: 4px 8px 4px 8px;
	color: #fff;
	background: #444;
	border: 1px solid #333;
	border-radius: 10px;
	box-shadow:  1px 1px 2px 0px rgba(255, 255, 255, 0.8) ; 
}
.X:hover, .roundRadio:hover {
	background: #6a6;
	box-shadow:  1px 1px 2px 0px rgba(150, 220, 150, 1) ; 
}
.Selected {
	color: #333;
	background: #fff;
	box-shadow:  1px 1px 2px 0px rgba(255, 100, 100, 1) ; 
}

JavaScript

function buttonClick (elt, cls) {
	console.log("elt.name: " + elt.name + ", elt.value: " + elt.value + ", elt.className: " + elt.className);
	for (i in document.getElementsByName(elt.name)) {
		if (!document.getElementsByName(elt.name).hasOwnProperty(i)) continue;
		var e = document.getElementsByName(elt.name)[i];
		console.log("e.name: " + e.name + ", e.value: " + e.value + ", e.className: " + e.className);
		if (e.classList.contains(cls)) toggleClassGroup(e, cls);
	}
	toggleClassGroup(elt, cls);
}

function toggleClassGroup(elt, cls) {
	console.log("elt.name: " + elt.name);
	if (elt.classList.contains(cls)) {
		elt.classList.remove(cls);
	} else {
		elt.classList.add(cls);
	}
}