Код скрипта:
< style> body { font: 12px verdana } .no { background: url(white.gif) no-repeat; padding-left: 22px; height: 22px; cursor: default } < /style> < body> < form> < input type="hidden" id="groupbox" name="groupbox" value="0"> < /form> < div class="no" id="div1" onclick="checked(1)">Element one< /div> < div class="no" id="div2" onclick="checked(2)">Element two< /div> < div class="no" id="div3" onclick="checked(3)">Element three< /div> < script language="JavaScript"> var white = new Image; var green = new Image; white.src = "white.gif"; green.src = "green.gif"; function checked(num) { sel = document.getElementById("groupbox").value; if (num != sel) { if (sel != 0) document.getElementById("div"+sel).style.background = "url(" + white.src + ") no-repeat"; document.getElementById("div"+num).style.background = "url(" + green.src + ") no-repeat"; document.getElementById("groupbox").value = num; } } < /script> < /body>
Для управления тремя радиокнопка нам необходим один элемент типа hidden, которому мы будем присваивать значения выделенной радиокнопки.
При нажатии на кнопку происходит обращение к функции checked, которой передается номер выделенной кнопки.
Если он не совпадает с текущей выделенной:
sel = document.getElementById("groupbox").value; if (num != sel) ...
тогда мы убираем выделение у выделенной радиокнопки (меняем бэкгроунд), ставим выделение нажатой кнопки (опять же при помощи бэкгроунда) и присваиваем объекту hidden номер выделенной кнопки:
document.getElementById("groupbox").value = num
Обратите внимание, что мы обратились к предзагрузке фонов:
var white = new Image; var green = new Image; white.src = "white.gif"; green.src = "green.gif";
чем способствовали удобству пользователя, которому не придется ждать подзагрузки картинки выделенной кнопки.
Постоянные ссылки
При копировании ссылка на TeaM RSN обязательна!
Оставить комментарий
Вы должны войти, чтобы оставить комментарий.