Можно ли посавить метку <label> на изображение?

M_A_X · February 12, 2010

Всем доброго времени суток!

Подскажите, может кто знает, каким образом можно поставить метку <label> на изображение в форме?

Задача такова: есть форма, в ней необходимо выбрать одно из нескольких изображений, выбор организован при помощи элементов radio. Возможно ли сделать так, чтобы при наведении и кликании на изображении выделялся сам элемент формы (кружок radio)? У меня пока сделать такое не получается (((

psywalker · February 13, 2010

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

Если это радиобатонны, то мы можем по клику на картинки выбирать их сколько угодно, а если это чекбоксы, то по клику на картинку только один? А так же если это чекбоксы, то при Отжатии они должны выключатся?

mishka · February 13, 2010

Макс я хочу самой обычной стандартной работы радиобаттонов и чекбоксов. Что тут непонятного?

Вот смотри как это должно работать, только в роли лейбла чтобы был не только текст, но также и картинка могла бы быть лейблом.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
</head>
<body>
<div id="wrapper">
	<form action="#">
		<fieldset>
			<ul>
				<li><input id="id1" type="radio" name="radiogroup" /> <label for="id1">Label 1</label></li>
				<li><input id="id2" type="radio" name="radiogroup" /> <label for="id2">Label 2</label></li>
			</ul>
			<ul>
				<li><input id="id3" type="checkbox" /> <label for="id3">Label 3</label></li>
				<li><input id="id4" type="checkbox" /> <label for="id4">Label 4</label></li>
			</ul>
		</fieldset>
	</form>
</div>
</body>
</html>

Скопируй этот код и посмотри как работают инпуты

psywalker · February 13, 2010

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

Замени радиобатонны на чекбоксы и посмотри чё будет. Короче протести так и так.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bg</title>
<style type="text/css">
	*{ margin: 0; padding:0}

	html, body { background: #999; height: 100%; }
	div { padding: 5px 5px 30px; background: #fff; width: 100px;}
	img { display: block; margin-top: 20px; border: 1px solid #000; padding: 3px;}

</style>

</head>

<body>

	<div id="conteiner">

		<input type="radio" />
		<input type="radio" />
		<input type="radio" />

		<img src="img1.png" />
		<img src="img2.png" />
		<img src="img3.png" />


	</div>
<script>

	var div = document.getElementById('conteiner')
	var img = div.getElementsByTagName('img')
	var input = div.getElementsByTagName('input')
	for(var i = 0; i<img.length;i++)img.item(i).onclick=function(){test(this)}

	function test(node){
		for(var i = 0; i<img.length;i++)img.item(i).input = input.item(i)


		if(node.input.type == 'checkbox'){

			if(node.input.checked){
				node.input.checked=false
			}else{node.input.checked=true}
		}
		if(node.input.type == 'radio'){
			for(var i = 0; i<input.length;i++)input.item(i).checked=false
			if(node.input.checked == true){
				node.input.checked=false
			}else{node.input.checked=true}
		}
	}


</script>
</body>
</html>

mishka · February 13, 2010

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

я тоже таким путем пошел.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<script type="text/javascript"><!--
		function initScript(){
			var u = navigator.userAgent.toLowerCase();
			if(u.indexOf('msie')!=-1){
				var _imgLabel=document.getElementsByTagName('img')
				for (var i=0;i<_imgLabel.length;i++){
					if(_imgLabel[i].className.indexOf('label')!=-1){
						_imgLabel[i].onclick = function(){
							if(document.getElementById(this.getAttribute('alt'))){
								if(document.getElementById(this.getAttribute('alt')).checked==false&&document.getElementById(this.getAttribute('alt')).type=='checkbox'){
									document.getElementById(this.getAttribute('alt')).checked=true
								}else{document.getElementById(this.getAttribute('alt')).checked=false}
								if(document.getElementById(this.getAttribute('alt')).checked==false&&document.getElementById(this.getAttribute('alt')).type=='radio'){
									document.getElementById(this.getAttribute('alt')).checked=true
								}
								if(document.getElementById(this.getAttribute('alt')).type!=='checkbox'&&document.getElementById(this.getAttribute('alt')).type!=='radio'){
									document.getElementById(this.getAttribute('alt')).focus()
								}
							}
						}
					}
				}
			}
		}
		if(window.addEventListener)window.addEventListener("load",initScript,false);
		else if(window.attachEvent)window.attachEvent("onload",initScript);
	//--></script>
</head>
<body>
<div id="wrapper">
	<form action="#">
		<fieldset>
			<input id="radio1" type="radio" name="radiogroup" />
			<label for="radio1"><img class="label" src="autumn.gif" alt="radio1" width="50" height="50" /></label>

			<input id="radio2" type="radio" name="radiogroup" />
			<label for="radio2"><img class="label" src="autumn.gif" alt="radio2" width="50" height="50" /></label>

			<input id="checkbox1" type="checkbox" />
			<label for="checkbox1"><img class="label" src="autumn.gif" alt="checkbox1" width="50" height="50" /></label>

			<input id="checkbox2" type="checkbox" />
			<label for="checkbox2"><img class="label" src="autumn.gif" alt="checkbox2" width="50" height="50" /></label>

			<div>
				<label for="text"><img class="label" src="autumn.gif" alt="text" width="50" height="50" /></label>
				<input id="text" type="text" value="Value" />
			</div>

			<div>
				<label for="password"><img class="label" src="autumn.gif" alt="password" width="50" height="50" /></label>
				<input id="password" type="password" value="Value" />
			</div>

			<div>
				<label for="select"><img class="label" src="autumn.gif" alt="select" width="50" height="50" /></label>
				<select id="select">
					<option>option 1</option>
					<option>option 2</option>
				</select>
			</div>
		</fieldset>
	</form>
</div>
</body>
</html>

Edited February 13, 2010 by mishka2

psywalker · February 13, 2010

Да, вариант рабочий. Нравится тем, что на странице могут находится и работать чекбоксы и радиобатонны вместе. А не нравится тем, что и правда громоздкий какой-то.

Но задача интересная, я тоже попробую решить, только позже.

psywalker · February 13, 2010

Готово Медведь, проверяй

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bg</title>
<style type="text/css">
	*{ margin: 0; padding:0}

	html, body { background: #999; height: 100%; }
	div { padding: 5px 5px 30px; background: #fff; width: 100px;}
	img { display: block; margin-top: 20px; border: 1px solid #000; padding: 3px;}

</style>

</head>

<body>
	<div id="checkbox">

		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />

		<img src="img1.png" />
		<img src="img2.png" />
		<img src="img3.png" />

	</div>
	<div id="radio">

		<input type="radio" />
		<input type="radio" />
		<input type="radio" />

		<img src="img1.png" />
		<img src="img2.png" />
		<img src="img3.png" />

	</div>

<script>
		var divCheckbox = document.getElementById('checkbox')
	var divRadio = document.getElementById('radio')
	var imgCheckbox = divCheckbox.getElementsByTagName('img')
	var inputCheckbox = divCheckbox.getElementsByTagName('input')
	var imgRadio = divRadio.getElementsByTagName('img')
	var inputRadio = divRadio.getElementsByTagName('input')	

	for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).onclick=function(){test(this)}
	for(var k = 0; k<imgRadio.length;k++)imgRadio.item(k).onclick=function(){test(this)}
	function test(node){	

		for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).input = inputCheckbox.item(i)
		for(var k = 0; k<imgRadio.length;k++)imgRadio.item(k).input = inputRadio.item(k)
		if(node.input.type == 'checkbox'){

			if(node.input.checked){

				node.input.checked=false
			}else{node.input.checked=true}
		}
		if(node.input.type == 'radio'){

			for(var i = 0; i<inputRadio.length;i++)inputRadio.item(i).checked=false
			if(node.input.checked == true){
				node.input.checked=false
			}else{node.input.checked=true}
		}
	}


</script>
</body>
</html>

mishka · February 13, 2010

Работает как надо, но по громоздкости несильно уступает моему, а по универсальности проигрывает. В моем способе лейблы связанны с инпутом правильно. Так как они и должны связыватся, тоесть for/id. Это работает во всех браузерах кроме ие. А скрипт мой работает только для ие. И чтобы связать картинку с инпутом(не только радио или чекбокс) нужно картинке задать клас "label" и в альте прописать айдишник нужного инпута.

Как видишь и работает правильно, и семантика не нарушенна. И никаких дополнительных айдишников (связка for/id не всчет).

Есть один минус: скрипт будет отрабатывать для всех ие. Если в ие9 или в обновленной версии ие8 проблему связки картинки лейбла с инпутом пофиксят, то придется переделать условие отработки джс. А если не пофиксят, то все ок.

а самый простой способ - положить изображение бекграундом на лейбл :lol:

Edited February 13, 2010 by mishka2

psywalker · February 13, 2010

Смотри медведь, можно же в моём варианте посемантничать, например сделать одну общую форму и в ней уже филдсетами разделить наши импуты и картинки на нужные части. Далее также картинки засунуть в лейблы. По правилам неважно где находятся лейблы и связанные с ним инпуты, на каком расстоянии и т. д., так как главное чтобы for/id. совпадало :lol:

mishka · February 13, 2010

Смотри медведь, можно же в моём варианте посемантничать, например сделать одну общую форму и в ней уже филдсетами разделить наши импуты и картинки на нужные части. Далее также картинки засунуть в лейблы. По правилам неважно где находятся лейблы и связанные с ним инпуты, на каком расстоянии и т. д., так как главное чтобы for/id. совпадало

Во, сделай так и проверь работу :lol:

Макс, такими темпами ты тут скоро будешь главным джсором. Главным верстальщиком уже стал :lol:

psywalker · February 13, 2010

Во, сделай так и проверь работу
Макс, такими темпами ты тут скоро будешь главным джсором. Главным верстальщиком уже стал

Да неее, откуда там, я что-то могу сделать, на самом начальном уровне, но дальше моих мозгов не хватает к сожалению :lol:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bg</title>
<style type="text/css">
	*{ margin: 0; padding:0}

	html, body { background: #999; height: 100%; }
	div { padding: 5px 5px 30px; background: #fff; width: 100px;}
	img {

		margin-top: 20px;
		border: 1px solid #000; 
		padding: 3px;

	}
	label {  }

</style>

</head>

<body>
<form action="#" id="form">
	<fieldset id="checkbox">

		<input type="checkbox" id="check1" />
		<label for="check1"><img src="img1.png" /></label>

		<input type="checkbox" id="check2" />
		<label for="check2"><img src="img2.png" /></label>

		<input type="checkbox" id="check3" />
		<label for="check3"><img src="img3.png" /></label>

	</fieldset>
	<fieldset id="radio">

		<input type="radio" id="radio1" />
		<label for="radio1"><img src="img1.png" /></label>

		<input type="radio" id="radio2" />
		<label for="radio2"><img src="img2.png" /></label>

		<input type="radio" id="radio3" />
		<label for="radio3"><img src="img3.png" /></label>

	</fieldset>
</form>	
<script>
		var divCheckbox = document.getElementById('checkbox')
	var divRadio = document.getElementById('radio')
	var imgCheckbox = divCheckbox.getElementsByTagName('img')
	var inputCheckbox = divCheckbox.getElementsByTagName('input')
	var imgRadio = divRadio.getElementsByTagName('img')
	var inputRadio = divRadio.getElementsByTagName('input')	

	for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).onclick=function(){test(this)}
	for(var k = 0; k<imgRadio.length;k++)imgRadio.item(k).onclick=function(){test(this)}
	function test(node){	

		for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).input = inputCheckbox.item(i)
		for(var k = 0; k<imgRadio.length;k++)imgRadio.item(k).input = inputRadio.item(k)
		if(node.input.type == 'checkbox'){

			if(node.input.checked){

				node.input.checked=false
			}else{node.input.checked=true}
		}
		if(node.input.type == 'radio'){

			for(var i = 0; i<inputRadio.length;i++)inputRadio.item(i).checked=false
			if(node.input.checked == true){
				node.input.checked=false
			}else{node.input.checked=true}
		}
	}


</script>
</body>
</html>

mishka · February 13, 2010

а ты проверил работу в каком нибудь браузере кроме ие?

for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).onclick=function(){test(this)}

это можна записать так:

for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).onclick=function test(this)

Надо еще проверку на браузер сделать :lol:

Заметил как твой код потихоньку становится все больше и больше :lol:

psywalker · February 13, 2010

а ты проверил работу в каком нибудь браузере кроме ие?
Надо еще проверку на браузер сделать
Заметил как твой код потихоньку становится все больше и больше

Да, конеш проверял, везде пашет.

А код стал больше только на лейблы и for/id. :lol:

for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).onclick=function(){test(this)}
это можна записать так:
for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).onclick=function test(this)

Спасиб, будем иметь ввиду.

mishka · February 13, 2010

Да, конеш проверял, везде пашет.

Почему же у меня неадекватно работает? Тоесть чекбокс становится активным только если сделать два быстрых щелчка по имге. Это так в мозиле

psywalker · February 13, 2010

Почему же у меня неадекватно работает? Тоесть чекбокс становится активным только если сделать два быстрых щелчка по имге. Это так в мозиле

У меня также, будем разбираться) :lol:

Кстати с твоим примером у меня аналогичная хрень.

И ещё заметил, не всегда так работает, бывает волну ловлю и постоянно нажимается, и всё работает)

mishka · February 13, 2010

в моем примере джс отрабатывает только для ие! Во всех остальных браузерах стандартная работа for/id

psywalker · February 13, 2010

в моем примере джс отрабатывает только для ие! Во всех остальных браузерах стандартная работа for/id

Т.е. ты хочешь сказать, что в ИЕ работает странно а в остальных нормально?

mishka · February 13, 2010

я хочу сказать что мой джс работает только для ие. А в нормальных браузерах связка осуществляется благодаря стандартной работе for/id

ты мне говоришь что мой пример неправильно работает в мозилле. А я говорю что там он работает стандартно

psywalker · February 13, 2010

я хочу сказать что мой джс работает только для ие. А в нормальных браузерах связка осуществляется благодаря стандартной работе for/id

Ааа, ну тада это хреново конеш, давай мой способ добивать тада, раз он уже почти рабочий можно сказать, надо эту мелочь выяснить. :lol:

Я уже спать иду медведь, а ты если узнаешь чё, сообщи сразу, завтра будем дальше рулиться. :lol:

ты мне говоришь что мой пример неправильно работает в мозилле. А я говорю что там он работает стандартно

У меня не так. Я же не буду врать.

mishka · February 13, 2010

Макс, я те говорю что мой способ рабочий, и более правильный чем твой. :lol:

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

Твой код немного ближе к понятию ООП нежели мой. Но надо доработать.

ведь ты же експрешены юзаешь только для ие, для мозиллы без них обходишся. Вот и тут так же. Ведь с лейблом картинкой проблематолько в ие. Поэтому я делал джс который только для ие отрабатывает.

Edited February 13, 2010 by mishka2

psywalker · February 14, 2010

Макс, я те говорю что мой способ рабочий, и более правильный чем твой.
Под словом "правильный" подразумевается не красота и логика работы джс, а правильность работы связки лейбла и инпута.
Твой код немного ближе к понятию ООП нежели мой. Но надо доработать.
ведь ты же експрешены юзаешь только для ие, для мозиллы без них обходишся. Вот и тут так же. Ведь с лейблом картинкой проблематолько в ие. Поэтому я делал джс который только для ие отрабатывает.

Да нее, я ничего и не говорю. Просто мне интересно, почему чекбоксы работают только с двух щелчков, вот бы выяснить причину.

Медведь, смотри какую я закономерность нашёл. В общем убираю for/id, начинает нормал работать. Если их пишу, то опять через раз.

Ооо, нашёл решение, если засунуть чекбокс в лейбл, то всё работает как надо

И ещё нужно онклик повесить на сам лейбл, а не на имгу, тогда работает нормал. :lol:

psywalker · February 14, 2010

В общем вот окончательное решение, надеюсь твой тест покажет хорошие результаты.

Блиин, теперь в ИЕ плохо работает, чтож такое? :lol:

И кстати, так вот писать нельзя, ошибку выдаёт сразу

for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).onclick=function test(this)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bg</title>
<style type="text/css">
	*{ margin: 0; padding:0}

	html, body { background: #999; height: 100%; }
	div { padding: 5px 5px 30px; background: #fff; width: 100px;}
	img {
		border: 1px solid #000; 
		padding: 3px;
		margin-left: 10px;

	}
	fieldset { margin: 20px;}
	label { margin-top: 20px;display: block; }

</style>

</head>

<body>
<form action="#" id="form">
	<fieldset id="checkbox">
		<label for="check1"><input type="checkbox" id="check1" /><img src="img1.png" /></label>
		<label for="check2"><input type="checkbox" id="check2" /><img src="img2.png" /></label>
		<label for="check3"><input type="checkbox" id="check3" /><img src="img3.png" /></label>
	</fieldset>
	<fieldset id="radio">
		<label for="radio1"><input type="radio" id="radio1" /><img src="img1.png" /></label>
		<label for="radio2"><input type="radio" id="radio2" /><img src="img2.png" /></label>
		<label for="radio3"><input type="radio" id="radio3" /><img src="img3.png" /></label>
	</fieldset>
</form>	
<script>

		var divCheckbox = document.getElementById('checkbox')
	var divRadio = document.getElementById('radio')
	var imgCheckbox = divCheckbox.getElementsByTagName('label')
	var inputCheckbox = divCheckbox.getElementsByTagName('input')
	var imgRadio = divRadio.getElementsByTagName('label')
	var inputRadio = divRadio.getElementsByTagName('input')	

	for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).onclick=function(){test(this)}
	for(var k = 0; k<imgRadio.length;k++)imgRadio.item(k).onclick=function(){test(this)}
	function test(node){	

		for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).input = inputCheckbox.item(i)
		for(var k = 0; k<imgRadio.length;k++)imgRadio.item(k).input = inputRadio.item(k)
		if(node.input.type == 'checkbox'){

			if(node.input.checked){

				node.input.checked=false
			}else{node.input.checked=true}
		}
		if(node.input.type == 'radio'){

			for(var i = 0; i<inputRadio.length;i++)inputRadio.item(i).checked=false
			if(node.input.checked == true){
				node.input.checked=false
			}else{node.input.checked=true}
		}
	}


</script>
</body>
</html>

mishka · February 14, 2010

Макс верни прошлый вариант. Он был вполне рабочий. Но он у тя работал для всех браузеров! А ты сделай чтобы только для ие. Так как он лишь для него и нужен. Тогда везде все будет работать.

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

psywalker · February 14, 2010

Макс верни прошлый вариант. Он был вполне рабочий. Но он у тя работал для всех браузеров! А ты сделай чтобы только для ие. Так как он лишь для него и нужен. Тогда везде все будет работать.

Погоди, я не понял. Т.е. старый вариант работал для всех? А как же тада косяки в ФФ, двойные клики на чебоксы и т.д.?

mishka · February 14, 2010

рррр, Макс, ну не ..... блин.

У тебя джс отрабатывает для всех браузеров, а надо только для ие!

изза этого в мозилле косяки.

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

Edited February 14, 2010 by mishka2

psywalker · February 14, 2010

Ну вот пожалуйста, старый вариант, теперь везде хреново пашет.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bg</title>
<style type="text/css">
	*{ margin: 0; padding:0}

	html, body { background: #999; height: 100%; }
	div { padding: 5px 5px 30px; background: #fff; width: 100px;}
	img {

		margin-top: 20px;
		border: 1px solid #000;
		padding: 3px;

	}
	label {  }

</style>

</head>

<body>
<form action="#" id="form">
	<fieldset id="checkbox">

		<input type="checkbox" id="check1" />
		<label for="check1"><img src="img1.png" /></label>

		<input type="checkbox" id="check2" />
		<label for="check2"><img src="img2.png" /></label>

		<input type="checkbox" id="check3" />
		<label for="check3"><img src="img3.png" /></label>

	</fieldset>
	<fieldset id="radio">

		<input type="radio" id="radio1" />
		<label for="radio1"><img src="img1.png" /></label>

		<input type="radio" id="radio2" />
		<label for="radio2"><img src="img2.png" /></label>

		<input type="radio" id="radio3" />
		<label for="radio3"><img src="img3.png" /></label>

	</fieldset>
</form>	
<script>
		var divCheckbox = document.getElementById('checkbox')
	var divRadio = document.getElementById('radio')
	var imgCheckbox = divCheckbox.getElementsByTagName('img')
	var inputCheckbox = divCheckbox.getElementsByTagName('input')
	var imgRadio = divRadio.getElementsByTagName('img')
	var inputRadio = divRadio.getElementsByTagName('input')	

	for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).onclick=function(){test(this)}
	for(var k = 0; k<imgRadio.length;k++)imgRadio.item(k).onclick=function(){test(this)}
	function test(node){	

		for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).input = inputCheckbox.item(i)
		for(var k = 0; k<imgRadio.length;k++)imgRadio.item(k).input = inputRadio.item(k)
		if(node.input.type == 'checkbox'){

			if(node.input.checked){

				node.input.checked=false
			}else{node.input.checked=true}
		}
		if(node.input.type == 'radio'){

			for(var i = 0; i<inputRadio.length;i++)inputRadio.item(i).checked=false
			if(node.input.checked == true){
				node.input.checked=false
			}else{node.input.checked=true}
		}
	}


</script>
</body>
</html>

Sign In

Можно ли посавить метку <label> на изображение?

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

59 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