Код скрипта:

< 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 обязательна!

URI

Html (ЖЖ)

BB-код (Для форумов)

Оставить комментарий

Вы должны войти, чтобы оставить комментарий.