issue in hiding my data with checkbox

问题

I have two series of data and trying to hide them by clicking on the check box but the data series do not get hidden.

You can see my data series in my fiddle.

And that is the code I have used for hiding them:

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:

For this, you need to set the attribute 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";
    }
}

来源：https://stackoverflow.com/questions/18045945/issue-in-hiding-my-data-with-checkbox

标签

javascript

css

checkbox