Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Подключение плагина для радиобаттона через .class (https://javascript.ru/forum/xhtml-html-css/26305-podklyuchenie-plagina-dlya-radiobattona-cherez-class.html)

Mike_Kharkov 04.03.2012 01:48

Подключение плагина для радиобаттона через .class
 
Всем Привет.
Решил попробовать написать для себя скрипт по кастомизации радиобаттонов(с подключением через классы) и
столкнулся с непонимаем того, почему при клике на инпут начинает появлятся и сама картинка в теге:
<i class="myVirtualRadio">?
Такого по моим планам возникать не должно :)
Также хотелось бы понять как правильно организовать исчезание ’галочки’ при клике на другой радиобаттон?
Убирается почему 'галочка' то только с радио под названием 'шестой'? Остальные не реагируют...
(Буду признателен — если кто подскажет...)
Js код выглядит следующим образом:
var myClassRadio = document.getElementsByTagName('input');

var virtualClassRadio = document.getElementsByTagName('i');

for (i=0; i < virtualClassRadio.length; i++) {

if (virtualClassRadio[i].className=='myVirtualRadio') {

var virtualImg = virtualClassRadio[i];

virtualImg.onclick = function(){

this.style.backgroundImage='url(images/checked.png)';

}

}

};

for (i=0; i < myClassRadio.length; i++) {

if (myClassRadio[i].className=='classMyRadio') {

var classRadio = myClassRadio[i];

classRadio.onclick = function(){

if (this.checked == true) {

virtualImg.style.backgroundImage='url(images/checkoff.png)';

}

};

}

};

Скрин находится сдесь:
http://yamaradg.narod2.ru/history/radio.jpg
Саму страницу можно увидеть сдесь:
http://yamaradg.narod2.ru/history/mo...ini/index.html
P.S. В JS я новичек и на данный момент хотелось бы получить не столько чей то готовый код— сколько разобратся в причинах неполадок своего.
Буду благодарен за любую помощь по данному вопросу...

рони 04.03.2012 03:17

Mike_Kharkov,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]

virtualImg.style.backgroundImage='url(images/checkoff.png)'; -> virtualImg это последний элемент предыдущего перебора, поэтому только он и будет отключаться. функция должна перебирать ВСЕ нужные элементы каждый раз и в зависимости от checked менять картинку, либо запоминать что нажали до того и если это новый элемент делать картинку checked а на прежнем checkoff.png


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Mike_Kharkov 04.03.2012 10:00

Код отформатировал.
Спасибо что напомнили об этом.
Не подскажите почему же все таки при клике по инпуту происходит реакция в виде появления картинки с активным радиобаттоном?
(в коде нигде это не прописано...)
P.S. Пробовал впихивать циклы(по разному) с перебором <i> - но адекватного результата не вышло...


Часовой пояс GMT +3, время: 11:16.