Javascript hide/show classes with checkbox

Posted by Christina on Stack Overflow See other posts from Stack Overflow or by Christina
Published on 2010-03-29T08:50:32Z Indexed on 2010/03/29 8:53 UTC
Read the original article Hit count: 348

Filed under:

I am just learning javascript, so please bear with me!

I want to be able to use checkboxes to choose to hide/show div classes (to basically filter the amount of info being shown). It is done in this... but I'm try to figure out something much simpler (since I don't need to dynamically generate the checkbox options.)

I came across this example: The Javascript:

 function showMe (it, box) { 
   var vis = (box.checked) ? "block" : "none"; 
   document.getElementById(it).style.display = vis;
 } 

The HTML

<form>
<input type="checkbox" checked="checked" value="value1" onclick="showMe('div1', this)" />value1
<input type="checkbox" checked="checked" value="value2" onclick="showMe('div2', this)" />value2
<input type="checkbox" checked="checked" value="value3" onclick="showMe('div3', this)" />value3
</form>

<div id="div1" style="display:block">Show Div 1</div>
<div id="div2" style="display:block">Show Div 2</div>
<div id="div3" style="display:block">Show Div 3</div>

</body>

</html>

But it only works for div ids, not classes. Any idea on how I can work this?

Thanks in advance if you can help me out!

© Stack Overflow or respective owner

Related posts about JavaScript