单击时隐藏和显示输入 javascript
[英]hide and show input on click javascript
问题描述
I am trying to start with my p tag hidden, and then on click display the input field on screen.
我试图从隐藏我的 p 标签开始，然后点击在屏幕上显示输入字段。 I have this right now:我现在有这个：
<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>
however, I obviously can't close it, im not really sure how to hide it again on checkbox click.但是，我显然无法关闭它，我不确定如何在单击复选框时再次隐藏它。 so right now it starts hidden, and then on click, shows, then I need it to hide if I click it again.所以现在它开始隐藏，然后点击，显示，如果我再次点击它，我需要它隐藏。 thanks谢谢
3 个解决方案
解决方案1
1 2021-02-01 21:00:33
I think you could do something like this:我认为你可以这样做：
you set a
visibility styleto yourp tag您为p tag设置了visibility styleon your onclick function you check if the visibility style on your
p tagif it is hidden,if yesyou make itvisible,if noyou make ithidden在您的 onclick function 上，您检查p tag上的可见性样式是否隐藏，if yes，则使其visible，if no，则将其hidden<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>
解决方案2
1 2021-02-01 21:00:41
I am trying to start with my p tag hidden, and then on click display the input field on screen.我试图从隐藏我的 p 标签开始，然后单击在屏幕上显示输入字段。 I have this right now:我现在有这个：
<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>
however, I obviously can't close it, im not really sure how to hide it again on checkbox click.但是，我显然无法关闭它，我不确定如何在单击复选框时再次隐藏它。 so right now it starts hidden, and then on click, shows, then I need it to hide if I click it again.所以现在它开始隐藏，然后单击，显示，然后如果我再次单击它，我需要隐藏它。 thanks谢谢
解决方案3
0 已采纳 2021-02-01 21:16:02
One more possible solution to modify to your needs:另一种可能的解决方案可以根据您的需要进行修改：
<!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>
You can even re-arrange the display to remove the checkbox:您甚至可以重新排列显示以删除复选框：
<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>
One more option that doesn't use JS at all -- CSS only.另一种完全不使用 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>
解决方案4
0 2021-02-01 21:27:36
I'd recommend you use the classlist.toggle method of the object, this way you can implement utilitary css classes like the one in the example and adapt it to your own needs, also making it reusable.我建议您使用 object 的 classlist.toggle 方法，这样您就可以像示例中的那样实现实用的 css 类，并使其适应您自己的需要，同时使其可重用。
let toggler = document.getElementById('toggler'); console.log(toggler); toggler.onclick = function(){ let paragraph = document.getElementById('theParagraph'); paragraph.classList.toggle("hidden"); };
.hidden { display: none; }
<button id="toggler">toggle it</button> <p id="theParagraph" class="hidden">the paragraph</p>
I'd recommend you to take a look at the events that can be used here: https://developer.mozilla.org/en-US/docs/Web/Events#most_common_categories我建议你看看这里可以使用的事件： https://developer.mozilla.org/en-US/docs/Web/Events#most_common_categories
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.