www.webdeveloper.com
Results 1 to 2 of 2

Thread: Urgent Help: how to show/hide image on check box select/deselect?

  1. #1
    Join Date
    Jun 2011
    Posts
    1

    Urgent Help: how to show/hide image on check box select/deselect?

    Hi Masters,

    I Need your help on the bellow scenario:

    I have a list of checkboxes. Want to show or hide images related to each checkbox upon selection/deselection.

    I want initially the images will not shown as the check boxes are select the images will showup. if deselect any checkbox then that particular image will disappear with taking no space.

    Bellow is the code witch not working.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    $(document).ready(function () {
    $('.infiniteCarousel').infiniteCarousel();
    });
    
    function showImage(checkedBox){
    if(document.getElementById('checkedBox.id').checked==true){
    document.getElementById("checkedBox.value").style.visibility = 'visible';
    }
    else if(document.getElementById('checkedBox.id').checked==false){
    document.getElementById("checkedBox.value").style.visibility = 'hidden';
    }
    }
    </script>
    </head>
    <body>
    <br>
    <form method="post" action="#" name="test"> <input name="test1"
    value="image1" id="check1" onclick="showImage(this)" type="checkbox">Test
    1<br>
    <input name="test2" value="image2" id="check2"
    onclick="showImage(this)" type="checkbox">Test 2<br>
    <input name="test3" value="image3" id="check3"
    onclick="showImage(this)" type="checkbox">Test 3<br>
    <input name="test1" value="image4" id="check4"
    onclick="showImage(this)" type="checkbox">Test 4<br>
    <input name="test1" value="image5" id="check5"
    onclick="showImage(this)" type="checkbox">Test 5<br>
    <input name="test1" value="image6" id="check6"
    onclick="showImage(this)" type="checkbox">Test 6<br>
    <input name="test1" value="image7" id="check7"
    onclick="showImage(this)" type="checkbox">Test 7<br>
    <input name="test8" value="image8" id="check8"
    onclick="showImage(this)" type="checkbox">Test 8<br>
    </form>
    <br>
    <br>
    <a href="http://www.flickr.com/photos/remysharp/3047035327/"
    title="Tall Glow"><img
    src="http://farm4.static.flickr.com/3011/3047035327_ca12fb2397_s.jpg"
    alt="Tall Glow" id="image1" height="75" width="75"></a> <a
    href="http://www.flickr.com/photos/remysharp/3047872076/"
    title="Wet Cab"><img
    src="http://farm4.static.flickr.com/3184/3047872076_61a511a04b_s.jpg"
    alt="Wet Cab" id="image2" height="75" width="75"></a> <a
    href="http://www.flickr.com/photos/remysharp/3047871878/"
    title="Rockefella"><img
    src="http://farm4.static.flickr.com/3048/3047871878_84bfacbd35_s.jpg"
    alt="Rockefella" id="image3" height="75" width="75"></a> <a
    href="http://www.flickr.com/photos/remysharp/3047034929/"
    title="Chrysler Reflect"><img
    src="http://farm4.static.flickr.com/3220/3047034929_97eaf50ea3_s.jpg"
    alt="Chrysler Reflect" id="image4" height="75" width="75"></a>&lt; <a
    href="http://www.flickr.com/photos/remysharp/3047871624/"
    title="Chrysler Up"><img
    src="http://farm4.static.flickr.com/3164/3047871624_2cacca4684_s.jpg"
    alt="Chrysler Up" id="image5" height="75" width="75"></a> <a
    href="http://www.flickr.com/photos/remysharp/3047034661/"
    title="Time Square Awe"><img
    src="http://farm4.static.flickr.com/3212/3047034661_f96548965e_s.jpg"
    alt="Time Square Awe" id="image6" height="75" width="75"></a> <a
    href="http://www.flickr.com/photos/remysharp/3047034531/"
    title="Wonky Buildings"><img
    src="http://farm4.static.flickr.com/3022/3047034531_9c74359401_s.jpg"
    alt="Wonky Buildings" id="image7" height="75" width="75"></a> <a
    href="http://www.flickr.com/photos/remysharp/3047034451/"
    title="Leaves of Fall"><img
    src="http://farm4.static.flickr.com/3199/3047034451_121c93386f_s.jpg"
    alt="Leaves of Fall" id="image8" height="75" width="75"></a>
    </body>
    </html>

    Hope will get help. thank you all in advance.
    Jiten

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb Something to consider ...

    While not the way I would have done it, I think this is what you are trying to accomplish.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=247820
    
    /* following not included in post
    $(document).ready(function () {
      $('.infiniteCarousel').infiniteCarousel();
    });
    */
    
    function showImage(checkedBox) {
      if(document.getElementById(checkedBox.id).checked==true) {
        document.getElementById(checkedBox.value).style.visibility = 'visible';
      } else {
        document.getElementById(checkedBox.value).style.visibility = 'hidden';
      }
    }
    
    onload = function() {
      var id = '';
      var sel = document.getElementsByTagName('img');
      for (var i=0; i<sel.length; i++) {
        tmp = sel[i].id;  // alert(tmp);
        document.getElementById(tmp).style.visibility = 'hidden';
      }
    }
    </script>
    </head>
    <body>
    <br>
    <form method="post" action="#" name="test" onsubmit="return false"> 
    <input name="test1" value="image1" id="check1" onclick="showImage(this)" type="checkbox">Test 1<br>
    <input name="test2" value="image2" id="check2" onclick="showImage(this)" type="checkbox">Test 2<br>
    <input name="test3" value="image3" id="check3" onclick="showImage(this)" type="checkbox">Test 3<br>
    <input name="test4" value="image4" id="check4" onclick="showImage(this)" type="checkbox">Test 4<br>
    <input name="test5" value="image5" id="check5" onclick="showImage(this)" type="checkbox">Test 5<br>
    <input name="test6" value="image6" id="check6" onclick="showImage(this)" type="checkbox">Test 6<br>
    <input name="test7" value="image7" id="check7" onclick="showImage(this)" type="checkbox">Test 7<br>
    <input name="test8" value="image8" id="check8" onclick="showImage(this)" type="checkbox">Test 8<br>
    </form>
    <br>
    <br>
    
    <a href="http://www.flickr.com/photos/remysharp/3047035327/" title="Tall Glow">
    <img src="http://farm4.static.flickr.com/3011/3047035327_ca12fb2397_s.jpg"
     alt="Tall Glow" id="image1" height="75" width="75"></a> 
    
    <a href="http://www.flickr.com/photos/remysharp/3047872076/" title="Wet Cab">
    <img src="http://farm4.static.flickr.com/3184/3047872076_61a511a04b_s.jpg"
     alt="Wet Cab" id="image2" height="75" width="75"></a> 
    
    <a href="http://www.flickr.com/photos/remysharp/3047871878/" title="Rockefella">
    <img src="http://farm4.static.flickr.com/3048/3047871878_84bfacbd35_s.jpg"
     alt="Rockefella" id="image3" height="75" width="75"></a> 
    
    <a href="http://www.flickr.com/photos/remysharp/3047034929/" title="Chrysler Reflect">
    <img src="http://farm4.static.flickr.com/3220/3047034929_97eaf50ea3_s.jpg"
     alt="Chrysler Reflect" id="image4" height="75" width="75"></a>&lt; 
    
    <a href="http://www.flickr.com/photos/remysharp/3047871624/" title="Chrysler Up">
    <img src="http://farm4.static.flickr.com/3164/3047871624_2cacca4684_s.jpg"
     alt="Chrysler Up" id="image5" height="75" width="75"></a> 
    
    <a href="http://www.flickr.com/photos/remysharp/3047034661/" title="Time Square Awe">
    <img src="http://farm4.static.flickr.com/3212/3047034661_f96548965e_s.jpg"
     alt="Time Square Awe" id="image6" height="75" width="75"></a> 
    
    <a href="http://www.flickr.com/photos/remysharp/3047034531/" title="Wonky Buildings">
    <img src="http://farm4.static.flickr.com/3022/3047034531_9c74359401_s.jpg"
     alt="Wonky Buildings" id="image7" height="75" width="75"></a> 
    
    <a href="http://www.flickr.com/photos/remysharp/3047034451/" title="Leaves of Fall">
    <img src="http://farm4.static.flickr.com/3199/3047034451_121c93386f_s.jpg"
     alt="Leaves of Fall" id="image8" height="75" width="75"></a>
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles