CODEWITHSUNDEEP
javascripthtml
nisnis84
nisnis84

Reputation: 229

Changing checkbox visibility

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>

Upvotes: 0

Views: 17475

Answers (2)

marcgg
marcgg

Reputation: 66445

You're not giving any object to the function. A quick fix is:

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

Also, this HTML is wrong. It should be:

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

Upvotes: 1

Sampson
Sampson

Reputation: 268374

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

Upvotes: 1

Related Questions