Question

我是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>

非常感谢任何和所有帮助。谢谢大家！

Answer 1

您可以使用onchange

上的checkbox事件

<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进行测试

Answer 2

这里有两个问题。

您编写的脚本将显示更改为“”仍将显示文本框应为display="none";
每次有人更改复选框的值时，脚本都不会运行。

试试这个。将您的支票封装到一个函数中，然后将该函数添加到body onload事件和复选框的oncchage事件。

<script>

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

</script>
<body onload="checkHideTextField()">

<form name="box"> 
<input onchage="checkHideTextField()" 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>

使用Javascript更改CSS可见性属性

2 个答案: