Array.prototype.forEach.call(document.getElementsByName("radios"), function(input){ input.addEventListener("click", function(){ var radio = this; Array.prototype.forEach.call(document.getElementsByClassName("divs"), function(div){ div.style.display = div.id == radio.value ? "block" : "none"; }); }, false); });
Rojo: <input type = "radio" name = "radios" value = "rojo" /> Amarillo: <input type = "radio" name = "radios" value = "amarillo" /> Verde: <input type = "radio" name = "radios" value = "verde" /> <div id = "rojo" class = "divs"></div> <div id = "amarillo" class = "divs"></div> <div id = "verde" class = "divs"></div>
div{ width: 15em; height: 8em; display: none; } #rojo{ background: red; } #amarillo{ background: yellow; } #verde{ background: green; }