Question

32

Changing checkbox visibility

rated 0 times [ 35] [ 3] / answers: 1 / hits: 16611 / 15 Years ago, thu, february 25, 2010, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

breap

Add To Favorites

Follow

Total Points: 606

Total Questions: 96

Total Answers: 108

Location: Djibouti

Member since Sun, Feb 27, 2022

2 Years ago

breap questions

1 Chain query/mutation calls with RTK Query using React Hooks

Thu, Jun 24, 21, 00:00, 3 Years ago

1 How to go to another screen in top tab navigation in react native

Wed, Nov 11, 20, 00:00, 4 Years ago

1 React Storybook not Recognizing a Story

Wed, Mar 18, 20, 00:00, 4 Years ago

1 How to call javascript Function in Oracle APEX on button click in dynamic action?

Tue, Nov 5, 19, 00:00, 5 Years ago

1 Issue with Discord.js avatarURL

Mon, Oct 7, 19, 00:00, 5 Years ago

View All

answered 15 Years ago alessandrol · Accepted 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