Toggle image src on checkbox status

Toggle image source on checkbox status, change on value checked/unchecked

[PSWorx]

Ok i need to do this (no javascript for it yet):

I need to swap an image source depending on the checked/unchecked status of the corrosponding checkbox.

The form is as follows (well the snippet neway)

<div style="vertical-align: middle"><input type="checkbox" name="headerLink" id="headerLink" value="1" style="border: none; vertical-align: middle;" />
<label for="headerLink">&nbsp;Header&nbsp;&nbsp;</label>
<select id="linkba" name="linkba" style="vertical-align: middle">
<option value="before">Before</option><option value="after">After</option>
</select>&nbsp;:&nbsp;
<select id="linkposition" name="linkposition" style="vertical-align: middle">
<option value="">LINKS</option>
</select>
</div>

What i need is to display an image at the end of each checkbox/select option row i.e.

* Header Checkbox [Drop Down 1[!] [Drop Down 2[!] Image

The image will change to either a blank gif or a tickbox gif to show it is selected.

Any help would be great

TIA

[mikedee]

Something like this should work, you need some piece of data to relate the checkbox to the image, i have used the checkbox value, but you could use the name or the id. The image in each row must have the correct id.

<script>
function check_click(cb){
// get the image ref by the checkbox value
img = document.getElementById('image_'+cb.value);
img.src = (cb.checked)?'/images/checked.gif':'/images/blank.gif';
}
</script>

<div style="vertical-align: middle"><input type="checkbox" name="headerLink" id="headerLink" value="1" style="border: none; vertical-align: middle;" onclick="check_click(this)" />
<label for="headerLink">&nbsp;Header&nbsp;&nbsp;</label>
<select id="linkba" name="linkba" style="vertical-align: middle">
<option value="before">Before</option><option value="after">After</option>
</select>&nbsp;:&nbsp;
<select id="linkposition" name="linkposition" style="vertical-align: middle">
<option value="">LINKS</option>
</select>
</div>
<img src="/images/blank.gif" id="image_1">