JS: Making certain elements hidden via getElementsByClassName

Question

I'm trying to set up a script that sets invisible everything with a certain class name. This is an example of what I'm trying to call:

<script type="text/javascript">
function hideItems(){
        document.getElementsByClassName('class1').style.visibility = "hidden";      
}
</script>

The class names are on the dimensions of a table, similar to this example:

<table onclick="hideItems()" width="200" border="1">
  <tr>
    <td class="class1">1</td>
    <td class="class2">2</td>
    <td class="class3">3</td>
    <td class="class1">1</td>
    <td class="class2">2</td>
    <td class="class3">3</td>
  </tr>
  <tr>
    <td class="class3">3</td>
    <td class="class1">1</td>
    <td class="class2">2</td>
    <td class="class3">3</td>
    <td class="class1">1</td>
    <td class="class2">2</td>
  </tr>
</table>

In the end, there's going to be a three checkboxes, displaying the dimensions based on which of the three are selected. That part, I can do just fine, but calling the particular dimensions to become invisible is what I'm having an issue with currently.

Thanks in advance for any kind of help.

Answer 1

getElementsByClassName returns a collection. You can't collectively set properties unless you're using a framwork like jquery

var elems = document.getElementsByClassName('class1');

for(var i = 0; i != elems.length; ++i)
{
elems[i].style.visibility = "hidden"; // hidden has to be a string
}