И так, задача заключается в изменении внешнего вида стандартных чекбоксов. Пусть вместо чекбоксов будут простые картинки, имитирующие работу элементов формы.

Код скрипта выглядит следующим образом:

< style>

body { font: 12px verdana }
.no { background: url(cross.gif) no-repeat; padding-left: 22px; height: 22px; cursor: default }

< /style>

< body>

< form method="post">
< input type="hidden" id="checkbox1" name="checkbox1" value="0">
< input type="hidden" id="checkbox2" name="checkbox2" value="0">
< input type="hidden" id="checkbox3" name="checkbox3" value="0">
< /form>

< div class="no" id="div1" onclick="checked('div1', 'checkbox1')">Element one< /div>
< div class="no" id="div2" onclick="checked('div2', 'checkbox2')">Element two< /div>
< div class="no" id="div3" onclick="checked('div3', 'checkbox3')">Element three< /div> 

< script language="JavaScript">

function checked(divs, box) {

var obj = document.getElementById(box);
if (obj.value == 0) ground = "url('tick.gif') no-repeat";
else ground = "url('cross.gif') no-repeat";

document.getElementById(divs).style.background = ground;
obj.value = Math.abs(obj.value - 1);

} 

< /script>

< /body>

Теперь пройдемся подробнее по коду. Все чекбоксы заменяются объектом hidden:

< input type="hidden" id="checkbox1" name="checkbox1" value="0">
< input type="hidden" id="checkbox2" name="checkbox2" value="0">
< input type="hidden" id="checkbox3" name="checkbox3" value="0">

При этом у каждого чекбокса должно быть уникальное имя (checkbox1, checkbox2 и т.д.)
Имитация чекбокса осуществляется при помощи дива:

< div class="no" id="div1" onclick="checked('div1', 'checkbox1')">Element one< /div>

Класс "no" подгружает картинку чекбокса в виде фона. Каждый div так же имеет уникальное имя. При нажатии на div происходит обращение к функции checked, в которую передается id данного diva и id чекбокса, к которому привязан данный div:

checked('div1', 'checkbox1')

Функция checked выполняет следующие действия:

1. Проверяет значение данного чекбокса (в нашем случае объекта hidden), и меняет соответствующую картинку в зависимости от того, включен или отключен чекбокс:

var obj = document.getElementById(box);
if (obj.value == 0) ground = "url('tick.gif') no-repeat";
else ground = "url('cross.gif') no-repeat";

document.getElementById(divs).style.background = ground;

2. Присваивает объекту hidden значения переключателя 0 или 1:

obj.value = Math.abs(obj.value - 1);

При этом, если значение obj.value было равно 0, оно изменится на 1 (|-1|) или, если значение было равно 1, ovj.value будет присвоено значение 0.