SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript: show/hide on check + asp.net

    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);")

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •