php - 在 Javascript 中隐藏和显示文本框

Question

我正在尝试使用以下代码隐藏和显示框。这项工作，但默认情况下显示框。我可以隐藏该框并仅在单击时显示吗？目前 onclick 可以隐藏该框。

<script type="text/javascript">
function display(id) {
var obj = document.getElementById(id)
if (obj.style.display == "none") {
obj.style.display = "block"
    }
else {
    obj.style.display = "none"
    }
return false
}
</script>

 <form>
<input type="button" value="Customize" onclick="display('box1_<?=$pd_id?>')">
<input type="submit">
</form>

Answer 1

1）当然只是为对象添加一个样式或css类。

<input type="button" style="display:none" value="Customize" onclick="display()">

2）只需从事件中提取元素：

   function display(evnt) {
    var obj = evnt.target;
    obj.style.display = (obj.style.display === 'none') ? 'block' : 'none'; // (cond) ? <do> : <else>
}

jsFiddle 示例工作示例（忽略 getDocument 行，当然，一旦它隐藏，您就再也看不到它了..；）

http://jsfiddle.net/BRa9n/

Answer 2

在样式表或内联样式中添加以下内容

style="display: none;"

Answer 3

您可以使用 CSS，并添加：<div id="your_box" style="display:none;"></div>最初它将被隐藏并将onclick()属性更改为display:block

Answer 4

您可以隐藏该框'visibility: hidden' or 'display: none'，然后单击将属性更改为visibility = 'visible';

Answer 5

当然，您可以使用它object.style.visibility="hidden"来做到这一点。

Answer 6

当然，没有 JavaScript 也可以做到这一点（尽管 HTML 变得有点复杂，并且依赖于对:checked伪选择器的支持。鉴于 HTML：

<form>
    <label class="button" for="customize">Customize</label>
    <input type="checkbox" id="customize" />
    <input id="submit" />
</form>

和CSS：

label.button {
    padding: 0.2em 0.4em;
    -webkit-appearance: button;
}

#customize {
    display: none;
}

#customize + #submit {
    display: none;
}

#customize:checked + #submit {
    display: inline-block;
}

JS 小提琴演示。

参考：

• :checked伪选择器。
• :checked伪选择器兼容性。