Image Checkbox - Multiple

1
2
3
4
5
Unchecked
Unchecked
Unchecked
Unchecked
Unchecked

The following script allows you to use a different image for each checkbox.

<script type="text/javascript">
<!--
// Jeff
// www.huntingground.freeserve.co.uk

mychk=[
["unselected1.gif","selected1.gif"],
["unselected2.gif","selected2.gif"],
["unselected3.gif","selected3.gif"],
["unselected4.gif","selected4.gif"],
["unselected5.gif","selected5.gif"]
]

function resetBoxes(){ // set all checkboxes to unchecked
myForm=document.forms["img_chkbx"]
count=0
while(myForm["c"+count]){
myForm["c"+count].checked=false
document.images["p"+count].src = mychk[count][0]
count++
}
}

function chkStatus(n){
if(myForm["c"+n].checked==true){
myForm["c"+n].checked=false
document.images["p"+n].src = mychk[n][0]
}
else{
myForm["c"+n].checked=true
document.images["p"+n].src = mychk[n][1]
}

document.getElementById("display").innerHTML=""

for(i=0;i<mychk.length;i++){
if(myForm["c"+i].checked){
document.getElementById("display").innerHTML+="Checked: Value = "+myForm["c"+i].value+"<br>"
}
else{
document.getElementById("display").innerHTML+="Unchecked<br>"
}
}

}

// add onload="resetBoxes()" to the opening BODY tag
// -->
</script>

<form name="img_chkbx">

<div style="display:none">
<input type="checkbox" name="c0" value="1">
<input type="checkbox" name="c1" value="2">
<input type="checkbox" name="c2" value="3">
<input type="checkbox" name="c3" value="4">
<input type="checkbox" name="c4" value="5">
</div>

</form>

1 <img name="p0" src="unselected1.gif" onclick="chkStatus(0)">
2 <img name="p1" src="unselected2.gif" onclick="chkStatus(1)">
3 <img name="p2" src="unselected3.gif" onclick="chkStatus(2)">
4 <img name="p3" src="unselected4.gif" onclick="chkStatus(3)">
5 <img name="p4" src="unselected5.gif" onclick="chkStatus(4)">