Question

所以我的页面上有一个复选框，如果点击，则会显示一些隐藏的内容

<form onSubmit="return builder()">
Check this to reveal the hidden part <input type="checkbox" name="check" onClick="return show()" />
<div id="hide" style="display:none">hidden part</div>
(...more irrelevant code...)
</form>

onClick，它应该执行以下脚本：

function show() {
if (document.getElementByName("check").checked) 
{document.getElementById("hide").style.display = "block";}
else 
{document.getElementById("hide").style.display = "none";}
}

但它根本没有执行它，我插入一个警告（“hi”）并且没有弹出任何内容。我做错了什么？

另外，请不要jQuery。

Answer 1

更改show功能：

function show() {
if (document.getElementsByName("check")[0].checked) 
{document.getElementById("hide").style.display = "block";}
else 
{document.getElementById("hide").style.display = "none";}
}

是getElementsByName，而不是getElementByName。

另外，修改表单：

Check this to reveal the hidden part <input type="checkbox" name="check" onClick="show();" />

您不需要return。

Answer 2

你可以这样编写你的函数：

 <input type="checkbox" name="check" onClick="show(this);" />

你的职能：

function show(ref){
 if (ref.checked)
   document.getElementById("hide").style.display = "block";
else 
 document.getElementById("hide").style.display = "none";
}

这应该有用。

Answer 3

getElementsByName返回一个包含标记名称列表的数组，因此您需要使用document.getElementsByName（＆＃34; check＆＃34;）[0]而不是document.getElementsByName（＆＃34; check＆＃34;）。检查下面的代码。工作..欢呼！

<script>
function show() {

if (document.getElementsByName("check")[0].checked) 
{document.getElementById("hide").style.display = "block";}
else 
{document.getElementById("hide").style.display = "none";} 



}


</script>
<form onSubmit="return builder()">
Check this to reveal the hidden part <input type="checkbox" name="check" onClick="return show()" />
<div id="hide" style="display:none">hidden part</div>

</form>

</html>

HTML不执行OnClick脚本

3 个答案: