HTML不执行OnClick脚本

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

你可以这样写你的函数:

 <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 2

更改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 3

getElementsByName返回一个带有标签名称列表的数组，因此您需要使用document.getElementsByName("check")[0]而不是document.getElementsByName("check")。检查下面的代码，它能工作。干杯!

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