Question

我想在取消选中复选框时隐藏div内容。 Here's my code

我已经为id＆＃34;焦点＆＃34;做了几乎相同的功能。（大灰框）：

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

我做错了什么？

Answer 1

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

代替。

Answer 2

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

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

无法取消选中复选框（取消选中复选框时隐藏内容）

2 个答案: