Javascript hide/show classes with checkbox

Question

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!

T.J. Crowder · Accepted Answer · 2010-03-29 12:02:27Z

4

At the moment, you're probably best off using a library like Prototype, jQuery, Closure, or similar for this sort of thing, as standardization for finding elements by class name (the document.getElementsByClassName method) is relatively recent and it's not supported yet by at least one major browser (they document a way to add it, but not a very good one).

In Prototype, the $$ function searches by a large subset of the CSS3 selectors draft proposed recommendation. In jQuery, the $ function does much the same thing (via the Sizzle selector engine, which can also be used on its own, weparate from jQuery).

In Prototype, you can show or hide elements by class like so:

$$('div.myClassName').invoke('hide'); // Hides all matches
$$('div.myClassName').invoke('show'); // Shows all matches

In jQuery, it's:

$('div.myClassName').hide(); // Hides all matches
$('div.myClassName').show(); // Shows all matches

edited Mar 29, 2010 at 12:02

answered Mar 29, 2010 at 8:57

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

T.J. Crowder Over a year ago

@David: LOL, was just adding those (and Closure and Sizzle)

David Andersson Over a year ago

@T.J. Crowder: Double LOL, I was writing a very similar response when yours popped up. I removed mine and I felt I had to add the only thing that differed between mine and yours.

Christina Over a year ago

Ekk... I've been terrified of trying out jquery, but it only took 20 minutes to get it working perfectly. Amazing. Thank you guys!

bobince Over a year ago

Microsoft's getElementsByClassName-for-IE code isn't very good. It only works on IE8, it fails for class names containing punctuation, and it (utterly bizarrely) uses slow multiple passes/selectors when it could all be done in one. Avoid. (And like all getElementsByClassname fallback code, it of course returns a static NodeList not a live one.)

T.J. Crowder Over a year ago

@Bob: Oh, I didn't mean to imply that that M$ hack was any good. Just that they document a way to add it. Why the heck it isn't just implemented (preferably better than in that code!) I couldn't tell you...

Collectives™ on Stack Overflow

Javascript hide/show classes with checkbox

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related