homepage Welcome to WebmasterWorld Guest from 50.16.112.199
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Toggle an image when checkbox is checked/unchecked
bsbarker

5+ Year Member



 
Msg#: 4133918 posted 10:57 am on May 17, 2010 (gmt 0)

I have six checkboxes in my form. When each one is checked/unchecked I'd like to toggle an image related to that checkbox. Basically, I need the effect that would be achieved by using "oncheck" and "onuncheck" events (would be nice if those existed!) to make the images hidden and visible.

For each of the six checkboxes, I'm currently using "onfocus" and "onblur" events to toggle each image:

<input type="checkbox" onfocus="document.getElementById('[i]myImageId[/i]').style.visibility='hidden';" onblur="document.getElementById('[i]myImageId[/i]').style.visibility='visible';">

But of course the image becomes visible again with the "onblur" event, even if the box is still checked. And of course if I exclude the "onblur" event then it does not toggle back to the original image when the box is checked and then unchecked. Either way, not exactly what I'm going for.

Any suggestions?

 

Readie

WebmasterWorld Senior Member



 
Msg#: 4133918 posted 12:44 pm on May 17, 2010 (gmt 0)

Try writing a function to toggle it based on a variable, maybe something like:
var x = 1;
function toggleimage() {
if(x == 1) {
// SHOW IMAGE CODE
x = 2;
} else {
// HIDE IMAGE CODE
x = 1;
}
}
And then the checkbox looks like:

<input type="checkbox" onchange="toggleimage()">

Could even modify that to use the same function to toggle multiple images, although that'll get a bit more complicated:

<input type="checkbox" onchange="toggleimage('imageID')">
var x = new Array();
function toggleimage(theid) {
if(!x[theid]) {
x[theid] = 1;
}
if(x[theid] == 1) {
// SHOW IMAGE CODE
x[theid] = 2;
} else {
// HIDE IMAGE CODE
x[theid] = 1;
}
}

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4133918 posted 12:50 pm on May 17, 2010 (gmt 0)

<input type="checkbox" onclick="document.getElementById('myImageId').style.visibility=(this.checked)?'hidden':'visible';" >

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4133918 posted 5:58 pm on May 17, 2010 (gmt 0)

Remember that hidden and visible will still take up space in your document, you may want to use the display property, setting it to none to hide, block to display, instead.

If you don't mind it taking up the space, just set the src of the image element. Tested example.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Swap image</title>
<script type="text/javascript">
window.onload=function() { attachBehaviors(); }
function attachBehaviors() {
// only doing one here, but you can add others
if (
document.getElementById('toggle_chk') &&
document.getElementById('my_img')
) {
// So JS is "aware" of the element style
document.getElementById('my_img').style.display='block';
// Attach the behavior
document.getElementById('toggle_chk').onclick=function() {
toggle_image(this);
};
}
}
//
function toggle_image(chk) {
// already checked for my_img
// if you want to hide it . . .
document.getElementById('my_img').style.display=(chk.checked)?'block':'none';
// if you just want to swap src
//var src=(chk.checked)?'my_image.jpg':'';
//document.getElementById('my_img').src=src;
}
</script>
</head>
<body>
<form action="">
<p><input type="checkbox" name="toggle_chk" id="toggle_chk" value="1" checked>
<label for="toggle_chk">Image on/off</label></p>
<p><img src="my_image.jpg" id="my_img"></p>
</form>
</body>
</html>

bsbarker

5+ Year Member



 
Msg#: 4133918 posted 5:55 am on May 18, 2010 (gmt 0)

It turns out that daveVk's works great and is a much simpler solution than I expected! And since I don't need to worry about taking up space for what I'm doing, it will be perfect.

Much obliged to you all for your suggestions!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved