1

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

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

4

2 回答 2

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

于 2013-01-27T03:46:40.193 回答
1

这里有2个问题。

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

试试这个。将您的检查封装到一个函数中，然后将该函数添加到正文 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>
于 2013-01-27T03:46:49.487 回答