隐藏/显示div复选框，单击

Question

hello i was just trying to hide / show div's on checkbox click i have tried the code / script below but it didn't work ? i was also wondering if there is a easier way to do it?

 function checkBox1() { var checkBox = document.getElementById("myCheck1"); var text = document.getElementsByClassName("shop"); if (checkBox.checked == true){ text.style.display = "block"; } else { text.style.display = "none"; } } function checkBox2() { var checkBox = document.getElementById("myCheck2"); var text = document.getElementsByClassName("party"); if (checkBox.checked == true){ text.style.display = "block"; } else { text.style.display = "none"; } } function checkBox3() { var checkBox = document.getElementById("myCheck3"); var text = document.getElementById("dailyquests"); if (checkBox.checked == true){ text.style.display = "block"; } else { text.style.display = "none"; } } 

 <center>| Shop: <input type="checkbox" id="myCheck1" onclick="checkBox1()" checked> | Party: <input type="checkbox" id="myCheck2" onclick="checkBox2()" checked> | Dailyquests: <input type="checkbox" id="myCheck3" onclick="checkBox3()" checked> |</center> <br> <br> <div class="shop">TEXT HERE</div> <br> <div class="party">TEXT HERE</div> <br> <div class="dailyquests">TEXT HERE</div> 

sorry if my english is not good

Answer 1

document.getElementsByClassName return a list of elements. the text object is in the first element :

 function checkBox1() { var checkBox = document.getElementById("myCheck1"); var text = document.getElementsByClassName("shop")[0]; if (checkBox.checked == true){ text.style.display = "block"; } else { text.style.display = "none"; } } function checkBox2() { var checkBox = document.getElementById("myCheck2"); var text = document.getElementsByClassName("party")[0]; if (checkBox.checked == true){ text.style.display = "block"; } else { text.style.display = "none"; } } function checkBox3() { var checkBox = document.getElementById("myCheck3"); var text = document.getElementsByClassName("dailyquests")[0]; if (checkBox.checked == true){ text.style.display = "block"; } else { text.style.display = "none"; } } 

 <center>| Shop: <input type="checkbox" id="myCheck1" onclick="checkBox1()" checked> | Party: <input type="checkbox" id="myCheck2" onclick="checkBox2()" checked> | Dailyquests: <input type="checkbox" id="myCheck3" onclick="checkBox3()" checked> |</center> <br> <br> <div class="shop">TEXT HERE</div> <br> <div class="party">TEXT HERE</div> <br> <div class="dailyquests">TEXT HERE</div> 

Answer 2

Document.getElementsByClassName() returns an array-like object of all child elements which have all of the given class names.

change this:

document.getElementsByClassName("shop");
document.getElementsByClassName("party");
document.getElementsByClassName("dailyquests");

to:

document.getElementsByClassName("shop")[0];
document.getElementsByClassName("party")[0];
document.getElementsByClassName("dailyquests")[0];

to take the first element with that class

Ps.

In the third function you have to use 'document.getElementsByClassName' and not 'document.getElementById', because 'dailyquests' is a class, not an id

Demo : jsfiddle

Answer 3

This is because document.getElementsByClassName returns a collection & you need to pass the index to get the element.

Having said that you can modify the javascript and have only one function to do the work of displaying and hiding.

For example <input type="checkbox" id="myCheck1" onclick="toggleDisplay(this.id,'shop')" checked on click will call a toggleDisplay function and the id is passed using this.id . In toggleDisplay(this.id,'shop')` the second parameter is the class name

 function toggleDisplay(elemId, className) { if (document.getElementById(elemId).checked) { document.getElementsByClassName(className)[0].style.display = "block" } else { document.getElementsByClassName(className)[0].style.display = "none" } } 

 <center>| Shop: <input type="checkbox" id="myCheck1" onclick="toggleDisplay(this.id,'shop')" checked> | Party: <input type="checkbox" id="myCheck2" onclick="toggleDisplay(this.id,'party')" checked> | Dailyquests: <input type="checkbox" id="myCheck3" onclick="toggleDisplay(this.id,'dailyquests')" checked> | </center> <br> <br> <div class="shop">TEXT HERE</div> <br> <div class="party">TEXT HERE</div> <br> <div class="dailyquests">TEXT HERE</div> 

Answer 4

So getElementsByClassName returns a collection of items, you would need to choose the index -

function checkBox1() {    
  var checkBox = document.getElementById("myCheck1");
  var text = document.getElementsByClassName("shop");
  if (checkBox.checked){
    text[0].style.display = "block";
  } else {
   text[0].style.display = "none";
  }
}