Javascript 使用复选框隐藏我的数据时出现问题_Javascript_Css_Checkbox

Javascript 使用复选框隐藏我的数据时出现问题

javascript css checkbox

Javascript 使用复选框隐藏我的数据时出现问题,javascript,css,checkbox,Javascript,Css,Checkbox,我有两个系列的数据，并试图通过单击复选框来隐藏它们，但数据系列不会被隐藏您可以在我的中看到我的数据系列这就是我用来隐藏它们的代码： CSS： <input type="checkbox" checked="checked" class="messageCheckbox" value="line1" onclick="showOrHide(0);" />1 <input type="checkbox" value="line2" checked="checked" class

我有两个系列的数据，并试图通过单击复选框来隐藏它们，但数据系列不会被隐藏

您可以在我的中看到我的数据系列

这就是我用来隐藏它们的代码：

CSS：

<input type="checkbox" checked="checked" class="messageCheckbox" value="line1" onclick="showOrHide(0);" />1
<input type="checkbox" value="line2" checked="checked" class="messageCheckbox" onclick="showOrHide(1);" />2

showOrHide = function (i) {
    var selectt = document.getElementsByClassName("messageCheckbox")[i].value;
    if (document.getElementsByClassName("messageCheckbox")[i].checked) {
        document.getElementsByClassName(selectt)[0].style.display = 'none';
    } else {
        document.getElementsByClassName(selectt)[0].style.display = 'block';
    }
}

为此，需要设置属性

可见性

非常感谢您的回答，但我希望红色图形和蓝色图形通过按住复选框来隐藏和显示（复选框1表示蓝色，复选框2表示红色），正如您所看到的，我将“line1”和“line2”作为复选框的值，但这是我得到的错误：“未捕获的TypeError:无法读取未定义的属性“style”这里：如您所见，我为复选框添加了两个输入值，并将它们作为复选框的值指定为“line1”和“line2”，在javascript第1部分的末尾，我添加了“hideOrShow（）”函数，以使红色和蓝色图形不可见和可见，但这就是错误：“UncaughtTypeError:无法读取未定义的属性“style”这与隐藏显示功能有关！需要隐藏的元素位于SVG元素中。您需要修改

document.getElementsByClassName（“messageCheckbox”）[i].value

才能访问这两个图形。但是我如何才能做到这一点呢（别担心，应该没那么难。你可以在这里学习-，。祝你好运：）

<body>
    <div class="line1">data1</div><div class="line2">data2</div>
    <input type="checkbox" class="messageCheckbox" value="line1" onclick="showOrHide(0);" unchecked />1
    <input type="checkbox" value="line2" class="messageCheckbox" onclick="showOrHide(1);" unchecked />2
</body>

showOrHide = function (i) {
    var selectt = document.getElementsByClassName("messageCheckbox")[i].value;
    if (document.getElementsByClassName("messageCheckbox")[i].checked) {
        document.getElementsByClassName(selectt)[0].style.visibility = "hidden";
    } else {
        document.getElementsByClassName(selectt)[0].style.visibility = "visible";
    }
}