Код скрипта:
< 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 обязательна!
Оставить комментарий
Вы должны войти, чтобы оставить комментарий.