0

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

3
Contributors
2
Replies
3
Views
6 Years
Discussion Span
Last Post by Airshow
0

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

if(checkedBox.checked) {

Edited by twiss: n/a

1

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 by Airshow: n/a

Votes + Comments
Neat ! :-) - Zero13
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.