Javascript 单击复选框时隐藏/显示div

您好，我只是想在复选框单击时隐藏/显示div，我尝试了下面的代码/脚本，但没有成功？我还想知道有没有更简单的方法

函数checkBox1（）{
var checkBox=document.getElementById（“myCheck1”）；
var text=document.getElementsByClassName（“商店”）；
如果（checkBox.checked==true）{
text.style.display=“块”；
}否则{
text.style.display=“无”；
}
}
函数checkBox2（）{
var checkBox=document.getElementById（“myCheck2”）；
var text=document.getElementsByClassName（“一方”）；
如果（checkBox.checked==true）{
text.style.display=“块”；
}否则{
text.style.display=“无”；
}
}
函数checkBox3（）{
var checkBox=document.getElementById（“myCheck3”）；
var text=document.getElementById（“dailyquests”）；
如果（checkBox.checked==true）{
text.style.display=“块”；
}否则{
text.style.display=“无”；
}
}

|店铺：|聚会：|日常任务：|




此处文本


此处文本


此处的文本

文档。GetElementsByCassName

返回元素列表。文本对象位于第一个元素中：

函数checkBox1（）{
var checkBox=document.getElementById（“myCheck1”）；
var text=document.getElementsByClassName（“商店”）[0]；
如果（checkBox.checked==true）{
text.style.display=“块”；
}否则{
text.style.display=“无”；
}
}
函数checkBox2（）{
var checkBox=document.getElementById（“myCheck2”）；
var text=document.getElementsByClassName（“参与方”）[0]；
如果（checkBox.checked==true）{
text.style.display=“块”；
}否则{
text.style.display=“无”；
}
}
函数checkBox3（）{
var checkBox=document.getElementById（“myCheck3”）；
var text=document.getElementsByClassName（“dailyquests”）[0]；
如果（checkBox.checked==true）{
text.style.display=“块”；
}否则{
text.style.display=“无”；
}
}

|店铺：|聚会：|日常任务：|




此处文本


此处文本


此处的文本

Document.getElementsByCassName（）返回具有所有给定类名的所有子元素的类似数组的对象

更改此项：

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

致：

使用该类获取第一个元素

Ps.

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

演示：

---

这是因为

document.getElementsByClassName

返回一个集合&您需要传递索引以获取元素

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

---

例如

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

getElementById
用于id属性，而不是
class
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";
  }
}