39157368

hide or show something from checkbox in css/js

by Reid Horton

HTML

<div id="buttons">
  <input type="radio" name="group" value="1" checked> Button 1
  <br>
  <input type="radio" name="group" value="2"> Button 2
  <br>
  <input type="radio" name="group" value="3"> Button 3
  <br>
  <input type="radio" name="group" value="4"> Button 4
  <br>
  <input type="radio" name="group" value="5"> Button 5
  <br>
  <input type="radio" name="group" value="6"> Button 6
  <br>
</div>

<div id="section">
  This section should only be visible when either button 5 or button 6 is selected.
</div>

CSS

#section {
  display: none;
}

JavaScript

var buttons = document.querySelector("#buttons").querySelectorAll("input");
var section = document.querySelector("#section");

for (var i = 0; i < buttons.length; i++) {
	setListenerOnButton(i);
}

function setListenerOnButton(i) {
	buttons[i].addEventListener("click", function (event) {
  	if (i == 4 || i == 5) {
    	section.style.display = "initial";
    } else {
    	section.style.display = "none";
    }
  });
}