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

issue in hiding my data with checkbox

本文关键字：问题 数据 我的 复选框 隐藏      更新时间：2023-09-26

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

你可以在我的小提琴里看到我的数据系列。

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

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

Javascript:

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

为此，您需要设置属性visibility-http://jsfiddle.net/TrpcW/4/

<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";
    }
}
相关文章：