用复选框隐藏我的数据的问题

时间:2013-08-04 18:05:55

标签: javascript css checkbox

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

您可以在我的fiddle中查看我的数据系列。

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

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

1 个答案:

答案 0 :(得分:0)

为此,您需要设置属性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";
    }
}