Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

I would like the button on my web page to toggle the visibility of my two check-boxes.

How do I go about implementing such functionality?

<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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
163 views
Welcome To Ask or Share your Answers For Others

1 Answer

It's a good practice to keep your JavaScript code and CSS out of your HTML.

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

For the JavaScript code, we look up the two elements via their ID. We then attach some logic to the onclick method of the button itself. This logic checks the present value of the display style on the span element. If it's visible, we hide it. If it's hidden, we show it.

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

Online demo: http://jsbin.com/iyiki/2/edit


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...