Подключение плагина для радиобаттона

Yamaradg · March 3, 2012

Всем Привет.

Решил попробовать написать для себя скрипт по кастомизации радиобаттонов(с подключением через классы) и

столкнулся с непонимаем того, почему при клике на инпут начинает появлятся и сама картинка в теге:

?

Такого по моим планам возникать не должно

Также хотелось бы понять как правильно организовать исчезание ’галочки’ при клике на другой радиобаттон?

Убирается почему 'галочка' то только с радио под названием 'шестой'? Остальные не реагируют...

(Буду признателен — если кто подскажет...)

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/moi_plagini/index.html

P.S. В JS я новичек и на данный момент хотелось бы получить не столько чей то готовый код— сколько разобратся в причинах неполадок своего.

Буду благодарен за любую помощь по данному вопросу...

Edited March 4, 2012 by Yamaradg

Switch74 · March 5, 2012

переходи на jquery и не парься, иначе советую изучить js полностью и в совершенстве

считаю ты слишком перемудрил с функциями, не то что бы они сложные, просто 2 функции на обработку одного

почему не работает я не знаю, и не представляю почему с последним работает.

логика вещь сложная, и моя твою не понимать :rolleyes: , почему при клике на радиобаттон не должна появляться галочка

Yamaradg · March 5, 2012

логика вещь сложная, и моя твою не понимать , почему при клике на радиобаттон не должна появляться галочка

Прошу прощения - я не до конца обьяснил ситуацию.

(вернее не правильно скопировал код в этот пост)

То есть если код будет таким:


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

for (i=0; i < virtualClassRadio.length; i++) {
     if (virtualClassRadio[i].className=='myVirtualRadio') {
        var img = virtualClassRadio[i];
        img.onclick = function(){
	                 		   this.style.backgroundImage='url(images/checked.png)';
                   }
	          };
	     };

То 'Галочка при клике по инпуту всё равно появляется'?

(а картинка то в теге находится?)

Switch74 · March 5, 2012

блин я не понимаю ваших вопросов :dash:

Yamaradg · March 5, 2012

блин я не понимаю ваших вопросов

Возможно - это я что то упустил из виду?

Но в коде прописано что бы по клику на тег

в нём менялась картинка.(с галочкой).

Но нигде ведь не указано, что бы это происходило по клику на инпут?

br3t · March 5, 2012

По поводу убирания галочки с альтернативных вариантов - получаете 'name' радиобуттона, по которому кликнули, вытираете картинку со всех радиобуттонов с таким же name, прорисовываете картинку выбранному. На jquery мог бы собрать вам примерчик

Также попробуйте юзать <label for="..."> вместо несемантических i

Switch74 · March 5, 2012

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

аа... так у вас <input> внутри клик по инпуту - это естесно клик и по и по <body> ...

Sign In

Подключение плагина для радиобаттона

Question

Yamaradg

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

Yamaradg

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Yamaradg

Link to comment

Share on other sites

br3t

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information