HTML & JavaScript: Как сделать свои radiobutton при помощи AJAX

Вас устраивают стандартные радиокнопки? Если также, как и меня-нет, то вот простое решение-заменим их на картинки. Это позволит нам с лёгкостью подгонять радиокнопки под любой дизайн сайта. Ну что, поехали:

<script language="javascript">
// Эту функцию я использую всегда во всех скриптах.
// Она решает вопрос поиска объекта по id во всех броузерах.
function getElement(aID){
return (document.getElementById) ? document.getElementById(aID) : document.all[aID];
}
function SwitchRadio(liObj,Id){
// Получаем id нужного списка радиокнопок <ul>
var ulName=liObj.parentNode.id;
// Получаем массив со всеми элементами <li>, входящими в наш список
var orderedNodes = getElement(ulName).getElementsByTagName("li");
// Переключаем все кнопки в положение "выключено"
for (i=0; i<orderedNodes.length; i++){
orderedNodes[i].style.background="url(images/radio_off.gif) 0 2px no-repeat";
}
// Теперь включаем нашу кнопку...
liObj.style.background="url(images/radio_on.gif) 0 2px no-repeat";
// ...и передаём через ajaxagent её данные PHP-скрипту,
// который запишет их в сессию.
agent.call("aa_func.php", "AA_SaveFieldValue", "callback_SaveFieldValue", ulName, Id);
</script>
}

В коде страницы пишем что-то типа этого:

<ul id="Q1" class="questionsUL">
<li onClick="javascript:SwitchRadio(this,'1')">Вариант 1</li>
<li onClick="javascript:SwitchRadio(this,'2')">Вариант 2</li>
<li onClick="javascript:SwitchRadio(this,'3')">Вариант 3</li>
</ul>

А в стилях:

.questionsUL {
padding: 0;
margin: 0 0 0 20px;
}
.questionsUL li {
list-style: none;
margin: 0;
padding: 0;
background: url(images/radio_off.gif) 0 2px no-repeat;
padding: 0 0 5px 20px;
margin: 0;
cursor: pointer;
}

radio_on.gif и radio_off.gif - это наша кнопка. Соответственно включённая и выключенная. Стили прописаны для картинки с кнопкой размерами 10x10 пикселей.