可以't取消选中该复选框(取消选中复选框时隐藏内容）

can't uncheck the check box (hide content while checkbox is unchecked)

本文关键字：复选框 取消 隐藏 可以      更新时间：2024-04-04

我想在复选框未选中时隐藏div内容。这是我的代码

我为id为"focus"（灰色大框）的div制作了几乎相同的函数：

document.getElementById("checkFocus").onchange = function() {
var one = document.getElementById("focus");
    if (document.getElementById("checkFocus").checked === true) {
        one.style.display = "block";
    }
    else one.style.display = "none";
}

它起作用了！

所以，我不明白为什么下一个功能根本不起作用：

document.getElementById("checkMass").onchange = function() {
var elem = document.querySelector("PeriodicTable")
var mass = elem.querySelectorAll("div.element > div.mass");
    if (document.getElementById("checkMass").checked === true) {
        mass.style.display = "block";
    }
    else mass.style.display = "none";
}

我做错了什么？

elem.querySelectorAll("div.element > div.mass");不返回单个元素，而是返回所有匹配项的集合。

也就是说，你不能在数组上执行mass.style.display，只能在单个元素上执行，所以你需要执行

if (document.getElementById("checkMass").checked === true) {
    for (var i = 0; i < mass.length; i++) {
        mass[i].style.display = "block";
    }
else {
    for (var i = 0; i < mass.length; i++) {
        mass[i].style.display = "none";
    }
}

相反。

querySelector("Any CSS rule")需要一个规则，.表示类，#表示id，但您有querySelector("PeriodicTable")。因此，您正在查找标记名为PeriodicTable的元素。使用document.getElementById('PeriodicTable')或querySelector("#PeriodicTable")

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

相关文章：