Плагин для Радиобаттона...

Yamaradg · March 2, 2012

Всем привет.

При конструировании плагина для радиобаттона столкнулся с трудностью того, что во время нажатия на сам радиобаттон у меня в блоке с виртуальным баттоном(<i id="virtual_radio">) не срабатывает появление необходимой картинки?

При клике по <i id="virtual_radio"> всё происходит так как и задумано!?

Не пойму в чём причина?

js код следующий:

var myRadio = document.getElementById('myRadio');

var virtualRadio = document.getElementById('virtual_radio');

virtualRadio.onclick = function(){

if (myRadio.checked == false) {

myRadio.checked = true;

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

}

};

myRadio.onclick = function(){

if (myRadio.checked == false) {

myRadio.checked = true;

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

}

};

P.S. Cсылка на страницу с плагином находится здесь:

http://yamaradg.narod2.ru/history/check_2/index.html

Буду очень признателен за помощь...

Switch74 · March 2, 2012

не понимаю что именно вы хотите добиться своим кодом, но обычно пытаются добиться что-то вроде этого:


<style>
	.radio{width:10px;height:10px;border:1px solid #bbb;background:#d00;}
</style>
<script>
	function radio(obj)
	{
		var id = obj.id;
		var input = document.getElementById(id.substr(1));
		if(!input.checked)
		{
			obj.style.background = '#0d0';
			input.checked = 'checked';
		}
		else
		{
			obj.style.background = '#d00';
			input.checked = '';
		}
	}
</script>
<input type="radio" id="radio_1">
<div class="radio" id="_radio_1" onclick="radio(this);"></div>

Yamaradg · March 2, 2012

не понимаю что именно вы хотите добиться своим кодом, но обычно пытаются добиться что-то вроде этого:

Хотел добиться того что бы 'галочка' появлялась не только при клике по тегу <i>, а также при клике по самому инпуту и тегу <label>

alexandr_v-vich · March 2, 2012

Не очень разбираюсь в скриптах, но авось помогу....

Убрать .onclick, оставте просто


var virtualRadio = document.getElementById('virtual_radio');
var myRadio = document.getElementById('myRadio');
if (myRadio.checked == false) {
myRadio.checked = true;
virtualRadio.style.backgroundImage='url(images/checked.png)';
}

...вариант?

Edited March 2, 2012 by alexandr_v-vich

Yamaradg · March 2, 2012

Не очень разбираюсь в скриптах, но авось помогу....
Убрать .onclick, оставте просто
...вариант?

Не помогло. Но всёравно спасибо...

Edited March 2, 2012 by Yamaradg

Switch74 · March 2, 2012

ну тогда можно сделать так


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">

        <title>Test</title>
		<style>
		*{margin:0px;padding:0px;}
		html,body{height:100%;}
		.radio{display:inline-block;width:10px;height:10px;border:1px solid #bbb;background:#d00;}
		</style>
		<script>
		function radio(input)
		{
			var id = input.id;
			var obj = document.getElementById('_'+id);
			if(input.checked)
			{
				obj.style.background = '#0d0';
			}
		}
		</script>
    </head>
    <body>
		<label>
			<div class="radio" id="_radio_1"></div>
			<input type="radio" name="radio" id="radio_1" onclick="radio(this);">
			пункт радио
		</label>
    </body>
</html>

alexandr_v-vich · March 2, 2012

Только, что-то намудрил я...по-моему как-то так


var virtualRadio = document.getElementById('virtual_radio');
var myRadio = document.getElementById('myRadio');
if (myRadio.checked) {
virtualRadio.style.backgroundImage='url(images/checked.png)';
}

Switch74, Аха, да и вот и я про....опередили меня))

Edited March 2, 2012 by alexandr_v-vich

Yamaradg · March 2, 2012

Только, что-то намудрил я...по-моему как-то так
Switch74, Аха, да и вот и я про....опередили меня))

Так к сожалению тоже не работает..

alexandr_v-vich · March 2, 2012

Вариант Switch74 работает?

Switch74 · March 2, 2012

я так понимаю ты очень хочешь, чтобы данная реализация работала и в ie и в лисе

попробуй так


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">

        <title>Test</title>
		<style>
		*{margin:0px;padding:0px;}
		html,body{height:100%;}
		.radio{display:inline-block;width:10px;height:10px;border:1px solid #bbb;background:#d00;}
		</style>
		<script>
		function radio(elem)
		{
			var id = elem.id;
			var input = document.getElementById(id+'_');
			var obj = document.getElementById('_'+id);
			if(input.checked)
			{
				obj.style.background = '#0d0';
			}
		}
		</script>
    </head>
    <body>
		<label id="radio_1" onclick="radio(this);">
			<div class="radio" id="_radio_1"></div>
			<input type="radio" name="radio" id="radio_1_">
			пункт радио
		</label>
    </body>
</html>

но есть одно но, в некоторых браузерах чекед стоит по умолчанию и его не снять + если ты будешь делать список переключателей, то тебе нужно будет сделать функцию их обнуления

alexandr_v-vich · March 2, 2012

Небольшой вопрос. Зачем в label всё запихивать, с таким же успехом любой другой тег проканает, почему не


<label for="button" bla="blabla" onbla="blabla(blabl);">пункт радио</label>
<button`ы>

?

Edited March 2, 2012 by alexandr_v-vich

Yamaradg · March 2, 2012

Вариант Switch74 работает?

Ещё не пробовал...

+ Хотелось бы все таки не брать чужие идеи, а понять почему не работает именно мой вариант...

Небольшой вопрос. Зачем в label всё запихивать, с таким же успехом любой другой тег проканает, почему не
<label bla="blabla" onbla="blabla(blabl);">пункт радио</label>
<button`ы>
?

Да это я ради эксперемента попробовать решил.

Но вообще для меня такая конструкция не принципиальна..

alexandr_v-vich · March 2, 2012

Просто у вас стоит label с обращением к своему содержимому. Может и непринципиально...но проблема всегда в деталях, да и углядеть её с правильной семантикой проще..

Yamaradg · March 2, 2012

я так понимаю ты очень хочешь, чтобы данная реализация работала и в ie и в лисе
попробуй так
но есть одно но, в некоторых браузерах чекед стоит по умолчанию и его не снять + если ты будешь делать список переключателей, то тебе нужно будет сделать функцию их обнуления

Вы правы. Мне действительно необходима полная поддержка всех современных браузеров кроме IE-6.

Обнуление обычно решаю через

window.onload=function() {}

P.S. Спасибо за помощь.

Если не смогу адаптировать к норме свою конструкцию - то тогда возьму себе на вооружение вашу...

Edited March 2, 2012 by Yamaradg

Switch74 · March 2, 2012

label вообще во всех браузерах должен бы работать, но почему-то у мя в последнем фаере и ie7 не работает.

Если все вешать на js то можно label поменять на что угодно - это не принципиально, главное оставить input, остальное можно менять. В jquery все вышло бы куда проще.

Sign In

Плагин для Радиобаттона...

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information