Радио бутон, CSS и Javascript !?!

[3dfx]

Здравейте,

Имам нужда от малко помощ.
Правя уеб форма, която ще се изпраща с POST. В нея има два радио бутона, които искам да са задължителни. Имам скрипт, който при опит за изпращане валидира формата и ако някой от задължителните елементи не е попълнен го оцветява в червено. Това обаче не може да стане със стандартните радио бутони. Затова мисля да използвам custom бутони:

<script type="text/javascript">
function rbcc(el) {
rbn = el.getElementsByTagName("input")[0].name;
rbn = document.getElementsByName(rbn);
for (i=0;i<rbn.length;i++) {
rbn[i].checked = false;
rbn[i].parentNode.className = "rbu";
}
el.getElementsByTagName("input")[0].checked = true;
el.className = "rbc";
}
</script>

<style type="text/css">
.rbc {width:14px;height:13px;background:url(http://web-tourist.net/userfiles/2/2508.png) no-repeat;cursor:pointer;}
.rbu {width:14px;height:13px;background:url(http://web-tourist.net/userfiles/2/2509.png) no-repeat;cursor:pointer;}
.rbz {width:14px;height:13px;background:url(http://web-tourist.net/userfiles/2/същата_картинка_но_червена.png) no-repeat;cursor:pointer;}
.rbc input,.rbu input {display:none;}
</style>

<form>
<div class="rbc" onclick="rbcc(this)"><input type="radio" name="rb" value="purvi" checked="checked" /></div>
<div class="rbu" onclick="rbcc(this)"><input type="radio" name="rb" value="vtori" /></div>
<div class="rbu" onclick="rbcc(this)"><input type="radio" name="rb" value="treti" /></div>
</form>

Кодът е взет ето от този линк.

Идеята ми е да добавя допълнителен клас в CSS, който да зарежда червена картинка.
Тепърва се захвашам с такива неща и изобщо не съм ориентиран - бихте ли ме насочили как трябва да стане това?

С
[js]document.getElementsById("id_на_бутона").className = "rbz";[/js]
не успявам да постигна нищо (Object doesn't support this property or method)

Крайната цел е със JS да сменя класа на обекта (примерно от rbu на rbz) и по този начин да му променя външния вид.
Направих опит и само да му сменя картинката:

[js]document.getElementById("id_на_бутона").style.backgroundImage="url(http://web-tourist.net/userfiles/2/същата_картинка_но_червена.png.png)";[/js]

И пак никакъв успех... Срам ме е да си призная колко време се опитвам да го направя това

 

[3dfx]

ОК, със

[js]document.getElementById("id_на_бутона").style.backgroundImage="url('http://web-tourist.net/userfiles/2/същата_картинка_но_червена.png')";[/js]

успях да сменя картинката, но се оказа, че това не върши работа, защото после картинката престава да се сменя... Тоест получавам "неработещ" радио бутон...

Edit: Стана малко монологично, дано няма сърдити:

Стана по този начин:

[js]function setClassName(objId, className) {
document.getElementById(objId).className = className;
}[/js]

И след това:

[js]setClassName('bzz', 'rbc')[/js]

 

[shterev]

Човече малко логиката ти куца. Та радио бутоните са в групи, т.е. да вземем една анкета тя има да речем 3 отговора. Не можеш да маркираш и трите отговора, а само 1. Затова трябва да ползваш checkbox, като може да си ги стилизираш с някой javascript

http://mypocket-technologies.com/jquery/cust_radio_buttons/

 

[3dfx]

Мерси за отговора.
Идеята е, че има няколко радио бутона. При load-ването на формата нито един от тях не е избран. Ако юзъра се опита да изпрати формата без да е избрал нито един от радио бутоните трябва да види съобщение за грешка и бутоните да станат червени.
След малко ще кача пример някъде...

Едит: Ето тук има пример.

За да се покажат custom бутоните трябва да се поставят в class styled.

Във custom-form-elements.js има CSS, който скрива стандартните бутони. След това скриптът създава span със Class radio и всеки event променя backgroundposition-а на този span. Остава ми само да разбера как да накарам този span да си промени backgroundposition-a. Пробвам разни варианти със document.getElementsByClassName но дотук нямам сериозен напредък

 

[3dfx]

Получи се

[js]<script type="text/javascript">
function getElNa(x){
var e=document.getElementsByName(x);
for(var i=0;i<e.length;i++){e.previousSibling.style.backgroundImage="url('radio_red.png')";}
}
</script>[/js]
Пример