单击javascript隐藏并显示输入_Javascript_Html_Ejs

单击javascript隐藏并显示输入

javascript html

单击javascript隐藏并显示输入,javascript,html,ejs,Javascript,Html,Ejs,我试图从隐藏p标记开始，然后单击在屏幕上显示输入字段。我现在有这个： <label for="check-1">Small</label> <input type="checkbox" name="size[]" id="small" value="small" onclick="sFunction()"> <scri

我试图从隐藏p标记开始，然后单击在屏幕上显示输入字段。我现在有这个：

<label for="check-1">Small</label>
    <input type="checkbox" name="size[]" id="small" value="small" onclick="sFunction()">

    <script>
      function sFunction() {
        document.getElementById("s").innerHTML = '<label for="check-1">SMALL Price ($).   </label><input type="text" name="s" id="small">';
      }
    </script>
    <p id="s"></p>

小
函数sFunction（）{
document.getElementById（“s”）.innerHTML='SMALL Price（$）'；
}

然而，我显然无法关闭它，我真的不知道如何隐藏它再次点击复选框。所以现在它开始隐藏，然后点击，显示，然后我需要它隐藏，如果我再次点击它。谢谢

我想你可以这样做：

您将
```
可见性样式设置为p标记
```


在onclick函数中，检查p标记上的可见性样式是否隐藏，如果是，则检查使其可见，如果否，则检查使其隐藏
 <label for="check-1">Small</label>
      <input type="checkbox" name="size[]" id="small" value="small" onclick="sFunction()">

  <script>
    function sFunction() {
      if ("hidden" == document.getElementById("s").style.visibility) {
        document.getElementById("s").style.visibility = "visible";
      }
      else {
        document.getElementById("s").style.visibility = "hidden";
      }
    }
  </script>
  <p id="s" style="visibility:hidden">
     <label for="check-1">SMALL Price ($).</label><input type="text" name="s" id="small">
  </p>

小
函数sFunction（）{
if（“hidden”==document.getElementById（“s”）.style.visibility）{
document.getElementById（“s”）.style.visibility=“可见”；
}
否则{
document.getElementById（“s”）.style.visibility=“隐藏”；
}
}

小价格（$）。

另一种可能的解决方案可根据您的需要进行修改：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Test Page </title>
<style>
 .hide { display: none; }
</style>
</head><body>

<label for="check-1">Small</label>
<input type="checkbox" id="check-1" onclick="sFunction()">
<span id="smallPrice" class="hide" >Price $ <input type="text" id="small"></span>

<script>
function sFunction() {
  document.getElementById("smallPrice").classList.toggle('hide');
}
</script>

</body></html>



测试页
.hide{display:none；}
小的
价格美元
函数sFunction（）{
document.getElementById（“smallPrice”）.classList.toggle（'hide'）；
}

您甚至可以重新排列显示以删除复选框：
<label for="check-1">Small</label>
<span id="smallPrice" class="hide" >
<input type="checkbox" id="check-1" onclick="sFunction()">
Price $ <input type="text" id="small"></span>

小
价格美元

还有一个选项根本不使用JS——只使用CSS
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Toggle input element </title>

<style>
 label { font-size: 1.5em; color: red; }
 label:hover { cursor: pointer; }
 .toggle + label + span{ display:none; }
 .toggle:checked + label + span{ display:inline-block; }
</style>

</head>
<body>

<input type="checkbox" id="toggle1" class="toggle" hidden="">
<label for="toggle1">Small</label>
<span> Price $ <input type="text" id="small"></span>

</body></html>


切换输入元素
标签{字体大小：1.5em；颜色：红色；}
标签：悬停{光标：指针；}
.toggle+label+span{display:none；}
.toggle:checked+label+span{display:inline block；}
小的
价格美元
我建议您使用对象的classlist.toggle方法，这样您就可以实现示例中的实用css类，并根据自己的需要对其进行调整，同时使其可重用

let toggler=document.getElementById（'toggler'）；
控制台日志（切换器）；
toggler.onclick=function（）{
让段落=document.getElementById（'theParagraph'）；
段落.classList.toggle（“隐藏”）；
};
。隐藏{
显示：无；
}
切换它
段落