I have a script that will swap a pair of images based on the status of a check box, but what I need is to adapt it to handle multiple pairs of images. I've tried numerous variations of the code to no avail. Below is the URL to a demonstration of the code. When you click the check box for the 'Red Pair' the ghosted red dot turns into a deep red dot. The 'Green Pair' is a fake -- everything inside the dotted line is merely a singe image I placed there just for illustration.


The code for the image swap looks like this:

<script type="text/javascript">
function processCheckbox(checkbox) {
if (checkbox.checked) {
image.src = "ICONS/Z-red.png";
image.onclick = enabledClick;
} else {
image.src = "ICONS/Z-red-ghosted.png";
image.onclick = null;
function enabledClick() {


<form style='display:inline;' name="form-001" method="post" action="">
<input type="checkbox" onclick="processCheckbox(this);">

<img src="ICONS/Z-red-ghosted.png" id="image">


How do I adapt this code for both the 'Red Pair' and the 'Green Pair' of images?