Change image depending on status of CHECKBOX

[PSWorx]

Can anyone help me out here i need to show or hide an image depending on the status of a form CHECKBOX element, i need to this for up to three different CHECKBOXES so the script would need to handle multiple id/references.

Any help would be great.

TIA

[PSWorx]

I dont think anyone was going to answer this for me but not to worry ive found a solution, loverly job.

Keep up the good work boys 'n' girls.

cmworx.com coming soon

[texmex]

Just off the top of my head, you could use a class (of say cbimg) for your image element. You could then call a function (say checkit()) to hunt out an img element that has this classname and is also a sibling element to the checkbox itself. This function would be called by the checkbox's onchange event.

javascript would look something like

function checkit(cbox)
{
var source=(cbox.checked)? "checked.gif":"notchecked.gif";
var imgs=cbox.parentNode.getElementsByTagName("IMG");
for (var n=0;n<imgs.length;n++)
 if (imgs[n].className=="cbimg")
 imgs[n].src=source;
}

HTML bit would look something like:

<form >
<input type="checkbox" onchange="checkit(this)">
<img class="cbimg">
</form >

You could also simplify the HTML by using the window.onload function to attach the event handler (thus the checkbox element would intrinsically pass a pointer to itself.)

I won't bother doing that here though as that would make it luverly job (and you already have one of those :-)

[PSWorx]

Thanks for the reply this is the code i opted for in the end:

<script language="JavaScript">
<!--
function toggle(target)
{
obj=(document.all)? document.all[target] : document.getElementById(target);
obj.style.display=(obj.style.display=='none')? 'inline' : 'none';
}
//-->
</script>

I simply set the Tick Image for the CHECKED box to be displayed or hidden (via css) when the page is loaded (these decisions are done via php) then use the status of the checkbox to alter its display.

WITH this in the IMG tag

<img src="tickIcon.gif" border="0" alt="" id="header" style="display:none;" />

And this as the checkbox
To switch the image as required.

<input type="checkbox" name="headerlink" id="headerlink" value="1" style="border: none; vertical-align: middle;" onClick="toggle('header')" />

This should load the image displayed as none via css, then on setting the CHECKBOX it should show the image.

Use different id names for multiple objects.

Should work with all recent browser versions (windows) not sure about linux however mozilla based browsers should be fine. Mac? You tell me, im buying a G3 powerbook soon for testing so maybe ill add a post then.

Copy this post, paste it into a new html document and test it out, this could be used for other things than images.

Hopefully aswith the previous suggestion this will be of use to someone.