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

Question

你好，我只是想隐藏/显示div的复选框，我尝试了下面的代码/脚本，但是没有用？ 我也想知道是否有更简单的方法？

 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> 

对不起，如果我的英语不好

Answer 1

document.getElementsByClassName返回元素列表。 文本对象在第一个元素中：

 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（）返回具有所有给定类名称的所有子元素的类似数组的对象。

改变这个：

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

至：

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

在该课程中采用第一个要素

PS。

在第三个函数中，您必须使用“ document.getElementsByClassName”而不是“ document.getElementById”，因为“ dailyquests”是一个类，而不是一个id

演示 ： jsfiddle

Answer 3

这是因为document.getElementsByClassName返回一个集合，并且您需要传递索引才能获取该元素。

话虽如此，您可以修改javascript并只有一个功能来完成显示和隐藏的工作。

例如，单击时<input type="checkbox" id="myCheck1" onclick="toggleDisplay(this.id,'shop')" checked将调用toggleDisplay函数，并且使用this.id传递this.id 。 In toggleDisplay（this.id，'shop'）`中，第二个参数是类名

 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

因此， getElementsByClassName返回项目的集合，您需要选择索引-

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