Стилизация input type="radio"...

DjTarik · February 23, 2010

Задача такая: нужно стилизовать input type="radio".

Я мыслю так:

- В определённой форме находим все инпуты;

- Далее среди них находим те, у которых тип - "radio";

- Потом проверяем, кто имеет checked="checked";

- Меняем класс родительскому элементу;

HTML:

<form action="#" enctype="application/x-www-form-urlencoded" method="get" id="#" class="change-form" onclick="ChangeInput(this)">
     	<fieldset>
        <legend>Стилизованный "input type='radio'"</legend>
				<ul>
					<li><span><input type="radio" name="#" value="#" id="switch_6" /></span><label for="switch_6">Переключатель 6</label></li>
					<li><span><input type="radio" name="#" value="#" id="switch_7" /></span><label for="switch_7">Переключатель 7</label></li>
					<li><span><input type="radio" name="#" value="#" id="switch_8" /></span><label for="switch_8">Переключатель 8</label></li>
					<li><span><input type="radio" name="#" value="#" id="switch_9" /></span><label for="switch_9">Переключатель 9</label></li>
					<li><span><input type="radio" name="#" value="#" id="switch_10" /></span><label for="switch_10">Переключатель 10</label></li>
				</ul>
      </fieldset>
    </form>

JS:

<script type="text/javascript">
	// <![CDATA[
	function ChangeInput(obj)
		{
			var el, name, type;
			el = obj.elements;			
			for (i = 0; i<el.length; i++)
				{
					name = el[i].nodeName;
					if (name.toLowerCase() == "input")
						{
							type = el[i].type;
							if (type.toLowerCase() == "radio")
								{
									if (el[i].checked)
										{
											el[i].parentNode.className="on";
										}
									else
										{
											el[i].parentNode.className="off";
										}
								};
						};
				};
		};
	// ]]>
	</script>

Но что-то мне подсказывает, что всё это сделать можно красивее и код должен быть чище.

Отсюда вопросы:

1. Правильно ли я делаю "в теории", или есть лучше способы?

2. Как можно упростить код и сделать его чище?

JS я тока постигаю основы, поэтому сильно не пинайте)

Хочется написать вариант с нуля и понять смысл, так что Фреймворки не интересуют.

Спасибо.

s0rr0w · February 23, 2010

Для переключения единственного инпута абсолютно не нужно перебирать все ноды.

На эмулятор повесить онклик, который будет менять состояние.

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

DjTarik · February 23, 2010

Для переключения единственного инпута абсолютно не нужно перебирать все ноды.
На эмулятор повесить онклик, который будет менять состояние.
На лейбл повесить онклик, который будет искать нужный ID, и менять ему состояние.

Так инпут не один... Их может быть сколько угодно... Там их целый список.

s0rr0w · February 23, 2010

Так инпут не один... Их может быть сколько угодно... Там их целый список.

Используй name и getElementsByName

Great Rash · February 24, 2010

А я бы вообще убрал <input type="checkbox" />, а на его место поставил бы пару из <span> и <input type="hidden" />.

По спану я бы кликал, а в хиддене менял бы value на true или false, которое уходило бы на сервер.

UPD: или вот я ща подумал... наверное в спан нельзя запихивать инпут, и пару лучше сделать <div>-<input>

Вот структура:

<div onclick="setCheck(this);">
	check me
	<input type="hidden" name="checkbox1" value="false" />
</div>

В данном случае нам не понадобятся айдишники и getElementByName. Инпут можно найти например так - this.lastChild;, или так - this.getElementsByTagName('input')[0];

DjTarik · February 24, 2010

А я бы вообще убрал <input type="checkbox" />, а на его место поставил бы пару из <span> и <input type="hidden" />.
По спану я бы кликал, а в хиддене менял бы value на true или false, которое уходило бы на сервер.
UPD: или вот я ща подумал... наверное в спан нельзя запихивать инпут, и пару лучше сделать <div>-<input>
Вот структура:
<div onclick="setCheck(this);">
	check me
	<input type="hidden" name="checkbox1" value="false" />
</div>
В данном случае нам не понадобятся айдишники и getElementByName. Инпут можно найти например так - this.lastChild;, или так - this.getElementsByTagName('input')[0];

Допустим, у меня 20 радиобаттонов. Каждому диву писать событие?

Great Rash · February 24, 2010

Зачем каждому? У вас все эти дивы будут в форме. У формы будет id. Находим все дивы внутри формы и в цикле проставляем события:

var divs  = document.getElementById('myForm').getElementsByTagName('div');

for (var i = 0; i < divs.length; i++) {
	divs[i].onclick = function() {
		setCheck(this);
	}
}

DjTarik · March 28, 2010

В общем, нужна ваша помощь:

Теория:

Имеется картинка-спрайт на 4-е состояния:

1. Выключен.

2. Выключен, но с наведённой мышкой.

3. Включён.

4. Включён, но с наведённой мышкой.

Положение cпрайта задаётся классами в CSS.

HTML:


<body onload="ChangeInput('SwitchWrap')">

<form action="#" enctype="application/x-www-form-urlencoded" method="get" id="ChangeForm" class="change-form">
     	<fieldset>
        <legend>Стилизованный "input type='radio'"</legend>
				<ul id="SwitchWrap">
					<li><label for="switch_6"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_6" />Переключатель 6</label></li>
					<li><label for="switch_7"><span><!-- // --></span><input type="radio" name="#" value="#" checked="checked" id="switch_7" />Переключатель 7</label></li>
					<li><label for="switch_8"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_8" />Переключатель 8</label></li>
					<li><label for="switch_9"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_9" />Переключатель 9</label></li>
					<li><label for="switch_10"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_10" />Переключатель 10</label></li>
				</ul>
      </fieldset>
    </form>

JS:

function ChangeInput(obj)
		{
			var form = document.getElementById(obj);	// id списка
			var array = form.getElementsByTagName('input');	// массив из элементов 'input'
			for (var i = 0; i<array.length; i++)
				{
					var el = array[i];	// 'input'
					var parent = el.parentNode;	// 'label'
					var neighbor = el.previousSibling;	// 'span'
					if(el.checked)
						{
							neighbor.setAttribute('class','on');
							parent.setAttribute('onmouseover','OnHoverInput(this)');
							parent.setAttribute('onmouseout','OnInput(this)');
						}
					else
						{
							neighbor.removeAttribute('class');
							parent.setAttribute('onclick','ChangeInput("SwitchWrap")');
							parent.setAttribute('onmouseover','OffHoverInput(this)');
							parent.setAttribute('onmouseout','OffInput(this)');
						};
				};
		};
		// -->
		function OnHoverInput(obj)
			{
				obj.firstChild.setAttribute('class','on-hover');
			};
		function OnInput(obj)
			{
				obj.firstChild.setAttribute('class','on');
			};
		// -->		
		function OffHoverInput(obj)
			{
				obj.firstChild.setAttribute('class','off-hover');
			};
		function OffInput(obj)
			{
				obj.firstChild.removeAttribute('class');
			};
		// -->

В принципе, всё работает. Пока только в FF проверял.

Вопросов несколько, поэтому по списку:

1. Если мне нужно установить события 'onmouseover' и 'onmouseout' - это можно сделать только таким способом, как у меня? Через '.setAttribute'? Или как правильно?

2. Я присваиваю класс через "setAttribute('class','on')" - в IE не работает. Я так понимаю, что из-за 'class'? Как быть?

Я нуб в JS, так что сильно не пинайте. Расскажите, что к чему. =)

Спасибо.

hf3 · March 28, 2010

Вот здесь - отлично бы смотрела jQuery)

Если мне нужно установить события 'onmouseover' и 'onmouseout' - это можно сделать только таким способом, как у меня?

В общем по правильному события присваиваются функцией addEventListener

Но в ИЕ её аналог называется AttachEvent. И другого геммороя там масса

Так что лучше объект.онмаусовер = фукнция

2. Я присваиваю класс через "setAttribute('class','on')" - в IE не работает. Я так понимаю, что из-за 'class'? Как быть?

Если меня память не подводит - то в ИЕ этот атрибут называется className

DjTarik · March 31, 2010

Не получается.

// !!! -->
	onload = ChangeInput;

	var neighbor;

	function ChangeInput()
		{
			var list = document.getElementById('SwitchWrap');	// id списка
			var array = list.getElementsByTagName('input');	// массив из элементов 'input'
			for (var i = 0; i<array.length; i++)
				{
					var el = array[i];	// 'input'
					var parent = el.parentNode;	// 'label'
					neighbor = el.previousSibling;	// 'span'
					alert(neighbor);
					if(el.checked)
						{
							neighbor.setAttribute('class','on');

							parent.addEventListener("mouseover", OnHoverInput, false);
							parent.addEventListener("mouseout", OnInput, false);

						}
					else
						{
							neighbor.removeAttribute('class');

							parent.addEventListener("click", ChangeInput, false);
							parent.addEventListener("mouseover", OffHoverInput, false);
							parent.addEventListener("mouseout", OffInput, false);

						};
				};
		};
	// -->
	function OnHoverInput()
		{
			neighbor.setAttribute('class','on-hover');
		};
	function OnInput()
		{
			neighbor.setAttribute('class','on');
		};
	// -->		
	function OffHoverInput()
		{
			neighbor.setAttribute('class','off-hover');
		};
	function OffInput()
		{
			neighbor.removeAttribute('class');
		};
	// -->

и кусок из HTML:

<ul id="SwitchWrap">
					<li><label for="switch_6"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_6" />Переключатель 6</label></li>
					<li><label for="switch_7"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_7" />Переключатель 7</label></li>
					<li><label for="switch_8"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_8" />Переключатель 8</label></li>
					<li><label for="switch_9"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_9" />Переключатель 9</label></li>
					<li><label for="switch_10"><span><!-- // --></span><input type="radio" name="#" value="#" id="switch_10" />Переключатель 10</label></li>
				</ul>

Срабатывает только на последнем инпуте. Почему не работает в цикле?

Я так понимаю, события должны были присвоиться каждому инпуту?

p.S. Пока что только для FF.

Great Rash · March 31, 2010

Замыкания в яваскрипт.

DjTarik · March 31, 2010

Замыкания в яваскрипт.

Немного не понял. Это вообще реально, то, что я хочу сделать? (проставить всем инпутам события через цикл)

psywalker · March 31, 2010

Немного не понял. Это вообще реально, то, что я хочу сделать? (проставить всем инпутам события через цикл)

Да почему-же не реально, можно конечно-же.

Вот так вот например .setAttribute('onclick', 'tab(this);')

Т.е. тут мы вешаем ноде событие onclick, которое вызывает функцию tab()

DjTarik · March 31, 2010

Да почему-же не реально, можно конечно-же.
Вот так вот например .setAttribute('onclick', 'tab(this);')
Т.е. тут мы вешаем ноде событие onclick, которое вызывает функцию tab()

Вроде ж не будет работать в IE6.

psywalker · March 31, 2010

Вроде ж не будет работать в IE6.

Да вроде должно)

В общем когда-то месяца два назад я такую хрень мутил, потом меня унесло от занятий по своим причинам, короче проверь в ИЕ6, если пашет, то гуд

http://psywalker.ru/Forum/JS/tab-massive/8.html

DjTarik · March 31, 2010

Да вроде должно)
В общем когда-то месяца два назад я такую хрень мутил, потом меня унесло от занятий по своим причинам, короче проверь в ИЕ6, если пашет, то гуд
http://psywalker.ru/Forum/JS/tab-massive/8.html

Не, не пашет. Да и об этом я читал, что вроде не должно. вот теперь не могу понять, как тогда поступить? Не хочется же каждому инпуту прописывать по три события...(

Great Rash · March 31, 2010

Немного не понял. Это вообще реально, то, что я хочу сделать? (проставить всем инпутам события через цикл)

Это я написал какой запрос надо в гугль ввести, чтоб первая ссылка помогла вам в решении проблемы.

.setAttribute('onclick', 'tab(this);')

Вот так писать не надо никогда. Потом проблем не оберешься с кроссбраузерностью.

DjTarik · March 31, 2010

Это я написал какой запрос надо в гугль ввести, чтоб первая ссылка помогла вам в решении проблемы.
Подскажи, куда копать)
1. Я так понял - можно в цикле присвоить?
2. У меня проблема и переменными, или с установкой события?
.setAttribute('onclick', 'tab(this);')
Вот так писать не надо никогда. Потом проблем не оберешься с кроссбраузерностью.

Я уже попробовал)

Great Rash · March 31, 2010

Ну и как не помогает?

UPD:

А так?

DjTarik · March 31, 2010

Ну и как не помогает?
UPD:
А так?

Не так ответил, Сорри) Я свои вопросы запихнул в твою цитату)

UPD:

Подскажи, куда копать)

1. Я так понял - можно в цикле присвоить?

2. У меня проблема и переменными, или с установкой события?

Про попробовал - это я к тому, что через .setAttribute не прокатит.

Ща ещё твою ссылку гляну.

DjTarik · March 31, 2010

Блин... вроде понятно... Не могу допереть, а как это всё провернуть с функцией? У меня на события вызываются функции...

Great Rash · March 31, 2010

Елки-моталки... ну написано же там все:

for (var i = 0; i < links.length; i++) {
	(function(i) {
	   links[i].onclick = function() {
		   //тут функции которые надо вызываем
	   }
	})(i);
}

DjTarik · March 31, 2010

Елки-моталки... ну написано же там все:
function tra-ta-ta()
{
alert(i)
}
То уже нет. Возможно ли там вызывать функцию, которая определена где-то ещё?
Сорри, если непонятно объяснил...

Searcher · March 31, 2010

Замыкается на i. Сделайте функцию и передавайте ей i в аргументе, иначе используется глобальная переменная i....

Great Rash · March 31, 2010

Потому что писать надо так:

for (var i = 0; i < links.length; i++) {
	(function(i) {
	  links[i].onclick = function() { tra-ta-ta();}
	})(i);
}

Searcher · March 31, 2010

function tra-ta-ta(i)
{
alert(i)
}

Sign In

Стилизация input type="radio"...

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

51 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

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