|
В статье "Стильные чекбоксы" была описана технология изменения внешнего вида чекбоксов. В данной статье я использую практически идентичную технологию.
Код скрипта:
<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";
чем способствовали удобству пользователя, которому не придется ждать подзагрузки картинки выделенной кнопки.
|
