checkbox to hide/show table rows

**mafonso** · Apr 15 '08, 09:36 AM

...in my previous post I ment:

.style.display = ...

cheers.

**acoder** · Apr 15 '08, 10:36 AM

Thanks for that info. Yes, that would set the default setting which could be block for IE and table-row for Firefox, not sure about others.

Oh yeah, and welcome to the site :)

**saviola** · Jul 2 '10, 02:07 PM

Show and Hide DIV tag based on Checkbox selection

Code:

<head>
  <script language="javascript">
    function toggle(divId) {
    	var divArray = document.getElementsByTagName("div");
    	for(i = 0; i < divArray.length; i++){
    		if(divArray[i].className == divId){
    			if(divArray[i].style.display != 'none'){
    				divArray[i].style.display = 'none';
    			}else{
    				divArray[i].style.display = '';
    			}
    		}
    	}
    }
  </script>
</head>
<body>
  <form>
    <input type="checkbox" checked onClick="toggle('descr');"> See Descriptions
  </form>
  <div class="descr" style="display:none">Hello This is #1</div>
  <div class="descr" style="display:none">Hello This is #2</div>
  <div class="descr" style="display:none">Hello This is #3</div>
  <div class="non-descript">Hello This is not one of them</div>
</body>

**Dormilich** · Jul 5 '10, 06:02 AM

PS. divArray is not an Array, it’s a so-called NodeList or HTMLCollection. you’ll notice the difference, when trying to use the Array methods.

checkbox to hide/show table rows

Comment

Comment

Comment

Comment