javascript: show/hide on check + asp.net

**gigglesx2** · Mar 3, 2011 14:10

I wouldn't be surprised if I'm making this more complicated then it needs to be.

I have a checkbox that when checked will display many images in a table (that part actually works). BTW, this table is created in the code behind. The problem is when you deselect the checkbox, the images still show.

JAVASCRIPT:

function arrows(chkd)
{
var trs = document.getElementsByTagName("img");
for (var i=0; i<trs.length; i++) {
if (trs[i].className.match(/hide/))
{
trs[i].className = (chkd)? trs[i].className.replace(/hide/, "show") : trs[i].className.replace(/show/, "hide");
}
}
}

CHECKBOX
<asp:CheckBox ID="ArrCheck" runat="server" Checked="false" />

CODE BEHIND

ArrCheck.Attributes.Add("onclick", "arrows(this.checked);")

**AllanP** · Mar 3, 2011 17:31

You can hide or display the images directly, without changing the class names. This means that all images that initially have the class name "hide" will be hidden on page load and all others will be visible. On checking the box the hidden images will be displayed. On unchecking the box those with class name "hide" will be hidden again.

This slightly modified script does that. Adding additional "hide"s to images will allow you to control which ones appear and disappear.

Code :

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Hide images</title>
<script type="text/javascript">
<!--
function arrows(obj) 
 { var trs = document.getElementsByTagName("img");
   for(var i=0; i<trs.length; i++) 
    { if(trs[i].className.match(/hide/)) 
         { if(obj.checked==true){ trs[i].style.visibility="visible"; }
           else { trs[i].style.visibility="hidden";  }
         }
    }
  }
//-->
</script>
<style type="text/css">
<!--
.hide { visibility:hidden; }
-->
</style>
</head>
 
<body>
 
<p>
<input type="checkbox" id ArrCheck" name="ArrCheck" onclick="arrows(this)" value="ON"></p>
<p><img border="0" src="N2_sml.jpg" width="100" height="100">
<img border="0" class="hide" src="N3_sml.jpg" width="100" height="100">
<img border="0" src="N4_sml.jpg" width="100" height="100"> </p>
 
</body>
 
</html>

User Tag List

Thread: javascript: show/hide on check + asp.net

Thread Tools

Display

javascript: show/hide on check + asp.net

Bookmarks

Bookmarks

Posting Permissions