JavaScript - Show/Hide table rows with unchecked checkboxes

JavaScript
1

Hi -
I have a table with about 30 rows, which contain a checkbox and a bit of text each. What I’m trying to find a way to do is to have 2 buttons at the bottom of the page - HIDE & SHOW. When the HIDE button is clicked, I need to hide all the table rows which contain UNCHECKED textboxes. When the SHOW button is clicked, I want to restore the visibility of all the rows. I need to do this in JavaScript (which is what I’m having trouble with) - I’ve been able to get bits of it to work at various times, but I’m running out of time and I really need help. Any suggestions anyone has would be more than appreciated!
Thanks!
j-

2

Here’s an example of one way you could do it:


<html>
<head>
<title>Show/Hide Checkboxes example</title>
<script type="text/javascript">
function hideSelected() {
	var oTable = document.getElementById("myTable");
	var oRows = oTable.getElementsByTagName("tr");
	
	for( var i=0; i < oRows.length; i++ ) {
		var oInputs = oRows[i].getElementsByTagName("input");
		for( var j=0; j < oInputs.length; j++ ) {
			if( oInputs[j].name == "showHide" ) {
				if( oInputs[j].checked ) {
					oRows[i].style.display = "none";
				}
				break;
			}
		}					
	}
	
}

function showAll() {
	var oTable = document.getElementById("myTable");
	var oRows = oTable.getElementsByTagName("tr");

	for( var i=0; i < oRows.length; i++ ) {
		if( oRows[i].style.display == "none" ) {
			oRows[i].style.display = "";
		}
	}	

}
</script>
</head>
<body>
<table id="myTable">
	<tr><td>Row1</td><td><input type="checkbox" name="showHide" /></td></tr>
	<tr><td>Row2</td><td><input type="checkbox" name="showHide" /></td></tr>
	<tr><td>Row3</td><td><input type="checkbox" name="showHide" /></td></tr>
	<tr><td>Row4</td><td><input type="checkbox" name="showHide" /></td></tr>
	<tr><td>Row5</td><td><input type="checkbox" name="showHide" /></td></tr>
</table>
<input type="button" value="Hide Selected" onclick="hideSelected();" /><input type="button" value="Show All" onclick="showAll();" />
</body>
</html>
3

Great - that’s just great. Perfect. (Actually, it did the opposite of what I needed, which was to display all the Checked boxes and remove the rest, but that was easy enough to correct). Beautiful. I cannot express how thankful I am to you!

4

cool glad to help.

How do you check the boxes if they’re invisible? :slight_smile: