使用显示:没有;

<div id="divCheckbox" style="display: none;">

可视性:hidden隐藏了元素，但它仍然占用布局中的空间。 Display: none将元素完全从文档中移除，它不占用任何空间。

通过鼠标点击显示/隐藏:

<script language="javascript">

    function toggle() {

        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");

        if (ele.style.display == "block") {

            ele.style.display = "none";
            text.innerHTML = "show";
        }
        else {

            ele.style.display = "block";
            text.innerHTML = "hide";
        }
    }
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here

<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

来源:这里

使用style="display: none;"。此外，您可能不需要DIV，只需设置要显示的样式:复选框上没有样式可能就足够了。

因为你应该关注CSS的可用性和通用性，而不是使用id来指向特定的布局元素(这会导致巨大或多个CSS文件)，你应该在链接的.css文件中使用一个真正的类:

.hidden {
visibility: hidden;
display: none;
}

或者对于极简主义者来说:

.hidden {
display: none;
}

现在你可以简单地应用它通过:

<div class="hidden"> content </div>

使用显示:没有;

<div id="divCheckbox" style="display: none;">

可视性:hidden隐藏了元素，但它仍然占用布局中的空间。 Display: none将元素完全从文档中移除，它不占用任何空间。

自HTML5发布以来，人们现在可以简单地做:

<div hidden>This div is hidden</div>

注意:一些旧的浏览器不支持这个功能，尤其是IE < 11。

隐藏属性文档(MDN,W3C)