сейчас на сайте:
Лучшие сказки мира
Детектив и фантастика
Песни прошлых лет
Для досуга
смотреть оглавлениепримерразмер кода
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)">
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+"&kt;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)">