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

Question

jiten_raulo 0 Newbie Poster

15 Years Ago

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.

<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>

Let me know if need more explanation.
Hope will get help. thank you all in advance.
Jiten

graphics:image javascript

3 Contributors
2 Replies
300 Views
18 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by Airshow

Dani AI

Generated 9 Months Ago

Short diagnosis and a compact, robust fix.

was right to point at the broken use of string literals (the handler was trying to read 'checkedBox.id' instead of the element property). ’s jQuery approach attaches handlers correctly, but it uses visibility:hidden which keeps layout space — that does not meet the requirement “hide with taking no space.”

Solution outline (keeps images out of the layout, keyboard-accessible, and optionally lazy-loads the image bytes):

Hide images initially with CSS using display:none (this collapses the space).
Link each checkbox to its image with a data-target (or a clear id naming convention).
Listen to the change event (handles keyboard toggles and programmatic changes).
On check: set the image src from a data-src (optional lazy-load), remove the .hidden class and set aria-hidden="false". On uncheck: add .hidden and aria-hidden="true".

Example CSS + vanilla JS (adjust selectors to your markup):

.hidden { display: none; }
#myImages img { display: inline-block; margin-right: 6px; }

document.addEventListener('change', function(e){
  if (!e.target.matches('input[type=checkbox][data-target]')) return;
  var img = document.querySelector(e.target.dataset.target);
  if (!img) return;
  if (e.target.checked) {
    if (img.dataset.src && !img.src) img.src = img.dataset.src; // lazy load
    img.classList.remove('hidden');
    img.setAttribute('aria-hidden','false');
  } else {
    img.classList.add('hidden');
    img.setAttribute('aria-hidden','true');
  }
});

Notes and troubleshooting:

Use change not click so keyboard users are covered.
If you prefer jQuery, use .prop('checked') (not .attr('checked')) and .toggleClass('hidden') or .show()/ .hide().
If you need animated hide/show, animate opacity/transform on a wrapper and toggle display at the end of the animation.
For very large image sets, lazy-load (as shown) to avoid loading all images up front.

This approach preserves accessibility, removes layout gaps, and avoids the original string/id mistakes that caused the script to fail.

All 2 Replies

Airshow 425 WiFi Lounge Lizard

15 Years Ago

jiten_raulo,

You can further exploit jquery, chiefly by attaching the onclick handler to the checkboxes, which simplifies the HTML and the script.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style>
form {
	margin: 12px 0;
}
#myImages a {
	visibility: hidden;
}
#myImages img {
	margin-right: 5px;
	border: 1px solid #336666;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$('.infiniteCarousel').infiniteCarousel();
 	var $myImages = $("#myImages a");
	$("input[value^='image']").each(function(index){
		$(this).click(function(){
			var vis = $(this).attr('checked') ? 'visible' : 'hidden';
			$myImages.eq(index).css('visibility',vis);
		});
	});
});
</script>
</head>

<body>

<form method="post" action="#" name="test">
	<input name="test1" value="image1" type="checkbox" /><label for="check1">Test 1</label><br>
	<input name="test2" value="image2" type="checkbox" /><label for="check2">Test 2</label><br>
	<input name="test3" value="image3" type="checkbox" /><label for="check3">Test 3</label><br>
	<input name="test1" value="image4" type="checkbox" /><label for="check4">Test 4</label><br>
	<input name="test1" value="image5" type="checkbox" /><label for="check5">Test 5</label><br>
	<input name="test1" value="image6" type="checkbox" /><label for="check6">Test 6</label><br>
	<input name="test1" value="image7" type="checkbox" /><label for="check7">Test 7</label><br>
	<input name="test8" value="image8" type="checkbox" /><label for="check8">Test 8</label>
</form>

<div id="myImages"><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><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>
</div>
</body>
</html>

Airshow

Edited 15 Years Ago by Airshow because: n/a

ko ko commented: Neat ! :-) - Zero13 +6

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

twiss 155 Veteran Poster · Answer 1 · 2011-06-19T23:42:13+00:00

Provided the logic is correct, you need to remove the quotes on line 9, 10, 12 and 13 around and value.
Edit; you can also just do this:

if(checkedBox.checked) {

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

Dani AI

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers