Image Checkbox

The following script allows you to use images instead of showing checkboxes. Although checkboxes are still used they are hidden using CSS display:none, when an image is clicked the appropriate checkbox is selected or de-selected.

The same image name must be used with all images and include the appropriate ordinal number.
The same checkbox name must be used with all checkboxes and include the appropriate ordinal number.
Each image and checkbox pair must use the same ordinal number.

When an image is clicked the ordinal number is passed to the function and the appropriate image and state of the checkbox is changed.
The checkbox values are referenced as normal using the elements array or by name.

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

onload=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 = "chkoff.gif" 
count++
}
}

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

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

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

}

// 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="unselected.gif" onclick="chkStatus(0)">
2 <img name="p1" src="unselected.gif" onclick="chkStatus(1)">
3 <img name="p2" src="unselected.gif" onclick="chkStatus(2)">
4 <img name="p3" src="unselected.gif" onclick="chkStatus(3)">
5 <img name="p4" src="unselected.gif" onclick="chkStatus(4)">