javascript - 使用 Javascript 更改 CSS 可见性属性

标签 javascript

我是 JavaScript 的新手,我在使用它删除 CSS 属性时遇到了问题。

这是我正在尝试做的事情:

我试图在未选中复选框时使文本输入框不可见,并在选中该框时使其可见。这是我的代码:

<html>
<head>
<script>


if (document.box.test.checked == true)
    {document.getElementById("test").style.display == "";
    }



</script>
<body>

<form name="box"> 
<input type="checkbox" name="test" value="engraved">Engraved?
</form>

<div id="test" style="display:none">
<p>Engraving Message here:</p>
<form>
<input type="text" name="engraving-text" value="Type here">
</form>
</div>



</body>
</html>

非常感谢任何帮助。谢谢大家!

最佳答案

您可以在 checkbox 上使用 onchange 事件

<input type="checkbox" name="test" value="engraved" onchange="show_hide()">

然后切换输入​​框

function show_hide()
{
    if (document.box.test.checked) {
        document.getElementById("test").style.display = "block";
    } else {
        document.getElementById("test").style.display = "none";
    }
}

JSFiddle用于测试

关于javascript - 使用 Javascript 更改 CSS 可见性属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14544158/

相关文章:

javascript - 无法在表 td 中使用 Bootstrap Toggle?

javascript - 使用 codeigniter 和 AJAX 检查数据库 SQL 中是否存在电子邮件

javascript - 无法将带有 jquery 的 css 应用于特定的 H1 标签

javascript - JQuery 数据表不按隐藏值搜索

javascript - 链接到水平网页上的某个部分

javascript - 根据id计算指定div内的div数量 - js

php - 上传前检查文件大小

javascript - 按值获取下拉列表/组合框的索引(客户端)?

javascript - 为什么我的 JavaScript 在使用 Blazor 时不能正确呈现?

javascript - 在 Ember.js v2+ 中检测按键