Question

我希望我的网页上的按钮切换我的两个复选框的可见性。

如何实施此类功能？

<html>
<head>
<script language=javascript>
function validate(chk){
  if (chk.style.visibility == 'visible')
    chk.style.visibility = 'hidden';
  else
    chk.style.visibility = 'visible';
}
</script>
</head>
<body>
<form><span id=t style.visibility="visible" >
<input type=checkbox name=chk1>Please Check Me</span>
<input type=checkbox name=chk1>Please Check Me</span>
<p><input type=button value="check" onclick="return validate(t);">
</form>
</body>
</html>

Answer 1

将JavaScript代码和CSS保留在HTML之外是一种很好的做法。

<span id="t">
    <input type="text" />
    <input type="text" />
</span>
<button id="toggler">Toggle</button>

对于JavaScript代码，我们通过ID查找这两个元素。然后，我们将一些逻辑附加到按钮本身的onclick方法。此逻辑检查span元素上display样式的当前值。如果它可见，我们隐藏它。如果它被隐藏了，我们会展示它。

document.getElementById("toggler").onclick = function(){
   var s = document.getElementById("t");
   (s.style.display == "none") ? s.style.display = "" : s.style.display = "none";
};

在线演示：http://jsbin.com/iyiki/2/edit

Answer 2

你没有给这个功能提供任何对象。快速解决方法是：

return validate(document.getElementById('t'));

此外，这个HTML是错误的。它应该是：

<span id="t" style="visibility:visible" >

更改复选框可见性

2 个答案: