Ткните пальцем в проблему

WalkMan · November 17, 2010

пытаюсь сделать декорированый чекбокс

есть хтмл

			<div class="filterContent">
				<label class="check">Show 1<input type="checkbox" name="" checked="checked" /></label>
				<label>Show 2<input type="checkbox" name="" /></label>
				<label>Show 3<input type="checkbox" name="" /></label>
			</div>

есть квери

  $(document).ready( function() {
	$(".filterContent label").click(function () {
		if ($(this).hasClass("check"))
		  $(this).removeAttr("class");
		else
		  $(this).addClass("check");
	});
  });

цель менять класс при клике

через фаербаг тестил

почемуто проходит два раза цикл за один клик

т.е. на выходе ни чего не меняеться

	$(".filterContent label").click(function () {

		if ($(this).hasClass("check"))
		  alert("есть");

		else
		  alert("нет");

	});

с таким кодом выдает алерт два раза

пс

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

т.е.

$(this).input.attr('checked', true/false)

psywalker · November 17, 2010

А на чистом JS слабо смастерить?

WalkMan · November 17, 2010

А на чистом JS слабо смастерить?

а зачем

если будет использоваться библиотека?

меньше кода на квери

psywalker · November 17, 2010

а зачем
если будет использоваться библиотека?
меньше кода на квери

аа, тогда ясн

WalkMan · November 17, 2010

мальчик подожди

так ткни пальцем в чем проблема?

psywalker · November 17, 2010

мальчик подожди

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

WalkMan · November 17, 2010

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

ну извини

если шуток не понимаешь

а квери он на шаг в сторону простоты от жс

stars · November 17, 2010

у меня работает так

<script type="text/javascript">
	$(function() {
			$(".filterContent label").click(function () { if ($(this).hasClass("check")) { $(this).removeAttr("class"); } else { $(this).addClass("check"); } });
 	 });
</script>

psywalker · November 17, 2010

ну извини
если шуток не понимаешь

Понимаю, но просто подумал, что ты всерьёз)

а квери он на шаг в сторону простоты от жс

Да, я согласен, но на чистом ЖС много что можно написать, из-за чего не придётся подключать библиотеку квери. И вообще считаю, что перед тем, как учить квери, необходимо познать чистый ЖС

WalkMan · November 17, 2010

Понимаю, но просто подумал, что ты всерьёз)
Да, я согласен, но на чистом ЖС много что можно написать, из-за чего не придётся подключать библиотеку квери. И вообще считаю, что перед тем, как учить квери, необходимо познать чистый ЖС

почитывал библию

но она большая

а квери надо здесь и сейчас

WalkMan · November 17, 2010

у меня работает так

<script type="text/javascript">
	$(function() {
			$(".filterContent label").click(function () { if ($(this).hasClass("check")) { $(this).removeAttr("class"); } else { $(this).addClass("check"); } });
 	 });
</script>

странно

у меня ни в какую не хочет ни в одном браузере

ты просто скопипастил хтмл и жс

либо какието изменения вносил?

mishka · November 17, 2010

Зачем ты сносишь полностью весь атрибут class? Вместо того чтобы удалить только ненужный класс removeClass('check')

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

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

из того что я тут увидел - самый маленький код будет

$(function() {
	$(".filterContent label").click(function () { $(this).toggleClass("check"); });
});

Но опять же повторюсь, что это не есть верный подход

Edited November 17, 2010 by mishka2

WalkMan · November 17, 2010

Зачем ты сносишь полностью весь атрибут class? Вместо того чтобы удалить только ненужный класс removeClass('check')
И зачем свой велосипед изобретаешь? Ведь чекбокс это же не просто квадратик на экране который либо с галочкой, либо без. В зависимости от этой галочки разное значение отправиться на сервер.
По хорошим делам нужно чтобы в хтмл был нормальный чекбокс, а ты его заменял только визуально, и в зависимости от того что показывает его визуальный клон - менять значение на подлином чекбоксе.
из того что я тут увидел - самый маленький код будет
$(function() {
	$(".filterContent label").click(function () { $(this).toggleClass("check"); });
});
Но опять же повторюсь, что это не есть верный подход

сноситься атрибут что бы неоставалось class="";

да

см посткриптум

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

т.е.

$(this).input.attr('checked', true/false)

mishka · November 17, 2010

сноситься атрибут что бы неоставалось class="";

Прости за наивность и приставучесть, но плиз обьясни зачем? Чем критично то что останеться class=""? И что будет если лейблу будет задан еще какойто класс, ну типа цвет текста другой, или еще чего.

WalkMan · November 17, 2010

Прости за наивность и приставучесть, но плиз обьясни зачем? Чем критично то что останеться class=""? И что будет если лейблу будет задан еще какойто класс, ну типа цвет текста другой, или еще чего.

прощаю за наивность и приставучесть)

ни каких классов и стилей не будет

это кнопка

положение ON и OFF

mishka · November 17, 2010

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

я бы это делал так:

написал бы такой мини плагинчик

jQuery.fn.toggleChecked = function(){
	return this.each(function(){
		if(typeof(this.checked) != 'undefined'){
			if(this.checked == true) this.checked = false;
			else this.checked = true;
		}
	})
}

И потом в лббом месте смог бы поменять значение чекбокса на противоположное

jQuery('input:checkbox').toggleChecked();

Если нужен не просто toggle, то разбил бы на два таких плагина, один бы всегда устанавливал значение чекбокса/радиобокса в true, другой в false.

Вот собственно и апдейтик

jQuery.fn.toggleChecked = function(o){
	var o = jQuery.extend({
		check: true
	}, o)

	return this.each(function(){
		if(typeof(this.checked) != 'undefined') this.checked = o.check;
	})
}

Теперь можно запускать с разными значениями параметра check, по дефолту true

jQuery('input:checkbox').toggleChecked({check: false});
или
jQuery('input:checkbox').toggleChecked({check: true}); == jQuery('input:checkbox').toggleChecked();

Edited November 17, 2010 by mishka2

WalkMan · November 17, 2010

я бы это делал так:

код походу крутой

но я так понимаю он уже как плагин

а мне плагин не надо

да и признаццо честно я даже не понимаю как он работает))

может лучше подскажешь в чем может быть проблема

и как обратиться к $this.input?

Edited November 17, 2010 by WalkMan

mishka · November 17, 2010

я так понимаю лейбл и чекбокс связанны не for/id, а просто чекбокс засунут в лейбл?

WalkMan · November 17, 2010

я так понимаю лейбл и чекбокс связанны не for/id, а просто чекбокс засунут в лейбл?

да

но это я для просты себе

прогеры при натяжке естесвенно все пропишут

если глюк в этом то это поправимо

mishka · November 17, 2010

HTML

<input id="id" type="checkbox" checked="checked" />
<label for="id">label</label>


JS

jQuery(function(){
	initCheckbox();
})

// initCheckbox
function initCheckbox(){
	var _checkedClass = 'checked';
	jQuery('label').each(function(){
		var _label = jQuery(this),
			_input = document.getElementById(this.htmlFor);

		if(_input.checked) _label.addClass(_checkedClass);
		jQuery(_input).bind('click', function(){
			if(_input.checked) _label.addClass(_checkedClass);
			else _label.removeClass(_checkedClass);
		})
	})
}

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

Но я уже небуду этого делать не сейчас во всяком случае.

WalkMan · November 17, 2010

т.е. то направление в котором я писал скрипт в принципе не верное?

mishka · November 17, 2010

<label class="check">Show 1<input type="checkbox" name="" checked="checked" /></label>

Я считаю этот подход категорически неверным.

Ты не учел в своем скрипте связь с чекбоксом. Не учел что он изначально может быть выбранным, или не выбранным. Ты начинал свои пляски только вокруг лейбла, не обращая внимания на сам чекбокс. А нужно в первую очередь работать с чекбоксом (ведь именно его значение передастся на серв), а в зависимости от того в каком состоянии чекбокс - менять визуально лейбл, а чекбокс спрятать, только не через display: none, а как вариант - на абсолют его и left: -9999px, кстати тоже лучше джсом. Если в браузере будет отключен джс, а стили будут работать, то юзер увидит простой дефолтный чекбокс.

И на лейбл тоже лучше прописывать джсом 2 класса (например checkedTrue/checkedFalse). Чтобы не стайлить лейбл через label {} - чтобы, опять же без джс, юзер увидел простой лейбл.

Ну это все с моей точки зрения.

WalkMan · November 17, 2010

<label class="check">Show 1<input type="checkbox" name="" checked="checked" /></label>
Я считаю этот подход категорически неверным.
Ты не учел в своем скрипте связь с чекбоксом. Не учел что он изначально может быть выбранным, или не выбранным. Ты начинал свои пляски только вокруг лейбла, не обращая внимания на сам чекбокс. А нужно в первую очередь работать с чекбоксом (ведь именно его значение передастся на серв), а в зависимости от того в каком состоянии чекбокс - менять визуально лейбл, а чекбокс спрятать, только не через display: none, а как вариант - на абсолют его и left: -9999px, кстати тоже лучше джсом. Если в браузере будет отключен джс, а стили будут работать, то юзер увидит простой дефолтный чекбокс.
И на лейбл тоже лучше прописывать джсом 2 класса (например checkedTrue/checkedFalse). Чтобы не стайлить лейбл через label {} - чтобы, опять же без джс, юзер увидел простой лейбл.
Ну это все с моей точки зрения.

ну ты с позиции универсальности

я просто в жс слаб

поэтому я пока иду с позиции зачем изобреть лишнее

эта кнопка в панеле управления

точнее несколько кнопок

и их положения захватываються профилем пользователя

stars · November 18, 2010

странно
у меня ни в какую не хочет ни в одном браузере
ты просто скопипастил хтмл и жс
либо какието изменения вносил?

Хм странно дома работало... ну тогда вот пробуйте смотрите http://www.toolscraft.ru/test/testpage.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>JQuery test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<script type="text/javascript" src="/obj/scripts/jquery.js"></script>
	<script type="text/javascript">
		$(function() {
				$(".filterContent label").click(function () {
				$(this).toggleClass('check');
				if($(this).hasClass('check'))
					$(this).add('input').attr('checked', 'true');
				else
					$(this).add('input').attr('checked', '');
				return false; });
		});
	</script>
	<style type="text/css">
		.filterContent {
			background: silver;
			margin: 50px auto;
			width: 220px;
			padding: 0px 0px 0px 10px;
		}
		.check {
			background: #6c6a69;
		}
	</style>
</head>

<body>
<div class="filterContent">
	<label class="check">Show 1<input type="checkbox" name="" checked="checked" /></label>
	<label>Show 2<input type="checkbox" name="" /></label>
	<label>Show 3<input type="checkbox" name="" /></label>
</div>
</body>
</html>

Edited November 18, 2010 by stars

mishka · November 18, 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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>checked</title>
	<style type="text/css">
		div { margin: 20px; }
		.hidden {
			position: absolute;
			left: -99999px;
		}
		.checkedOff, .checkedOn {
			display: inline-block;
			padding: 1px 9px 0 11px;
			border: 2px inset #000;
			background: #dbdcdc;
			cursor: pointer;
		}
		.checkedOff {
			border-style: outset;
			padding: 0 11px 1px 9px;
		}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript">
		jQuery(function(){
			initCheckbox();
		})

		function initCheckbox(){
			var _checkedOnClass = 'checkedOn',
				_checkedOffClass = 'checkedOff';

			jQuery('input:checkbox').each(function(){
				var _label = jQuery('label[for="' + this.id + '"]');

				this.className += ' hidden';

				if(this.checked) _label.addClass(_checkedOnClass);
				else _label.addClass(_checkedOffClass);

				jQuery(this).bind('click', function(){
					if(this.checked) _label.addClass(_checkedOnClass).removeClass(_checkedOffClass);
					else _label.addClass(_checkedOffClass).removeClass(_checkedOnClass);
				})
			})
		}
	</script>
</head>
<body>
	<div>
		<input id="id-1" type="checkbox" checked="checked" />
		<label for="id-1">label</label>
	</div>
	<div>
		<input id="id-2" type="checkbox" />
		<label for="id-2">label</label>
	</div>
</body>
</html>

Edited November 18, 2010 by mishka2

WalkMan · November 18, 2010

...

Спасибо помогло!

to mishka2

твой код не осилил

но тоже спасибо

я так понимаю он под глобальные замены заточен больше?

Edited November 18, 2010 by WalkMan

Sign In

Ткните пальцем в проблему

Question

Link to comment

Share on other sites

42 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