Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Кастомный чекбокс и передача значения checked (https://javascript.ru/forum/jquery/26759-kastomnyjj-chekboks-i-peredacha-znacheniya-checked.html)

spo 21.03.2012 13:10
Кастомный чекбокс и передача значения checked
 
Делаю кастомный чекбокс.
При клике на lable успешно меняю картинку.
Но не знаю как передать значение в скрытый input type="checkbox". Нужно чтобы атрибут менялся - это "раз" и не знаю как правильно менять checked="checked" на unchecked="unchecked" или просто удалять checked="checked" - это "два". Прошу помочь по этим 2 вопросам.

Код:

<label for="new-window">
	<input type="checkbox" id="new-window" class="hide" value="new-window" checked="checked" />
	в новом окне
</label>



$('label').click(function() {
	$(this).toggleClass('unchecked');
	...
	return false
});


Код:
.label {
        display: block;
        height: 13px;
        padding-left: 19px;
        font-size: 11px;
        cursor: pointer;
        background: url('../img/checkbox.png') no-repeat;
}

.label.unchecked {
        background-position: 0 -13px;
}

atlantis 21.03.2012 14:13 
$('label').click(function() {
	if ( $(this).children('#new-window').attr('checked') ){
		$(this).children('#new-window').removeAttr('checked');
		$(this).removeClass('unchecked');
	} else {
		$(this).children('#new-window').attr('checked','checked');
		$(this).addClass('unchecked');
	}
	return false;
});

Не проверял. Но должно работать.

atlantis 21.03.2012 14:21
И ещё по поводу <label for="new-window">...
Незнаю как поведёт себя скрипт, если будет много чекбоксов с id="new-window" и <label for="new-window">, т.е. по идее если нажмёш на один, то все они изменят значение. Тогда тебе понадобится указывать разные значения for и id, но тогда скрипт (что я написал) не будет работать.
Лучше просто убери for у label и тогда должно работать нормально. Только id у чекбокса оставь.

atlantis 21.03.2012 14:30
А ещё лучше как-то так:
http://jsfiddle.net/qkWjf/

nikita.mmf 21.03.2012 15:02 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#id_check { display: none; }
		#id_check+label {  }
		#id_check:checked+label { font-weight: 700; }
	</style>
</head>
<body>
	<input type="checkbox" name="check" id="id_check"><label for='id_check'>Test</label>
</body>
</html>

atlantis 21.03.2012 15:44
nikita.mmf,
твой пример лучше, но тогда он будет привязан к id, что лично я не совсем люблю :)
Впрочем пусть сам выбирает.

spo 25.03.2012 12:04
Спасибо большое за ответы. Пример atlantis я ранее писал самостоятельно но он почему то не срабатывал. Возможно из-за неверного обращения объектам или изза for="".

Не понял код который написал nikita.mmf и почему он лучше?
Структура которую привел я тоже правильная единственное лишнее в ней это атрибут for="" у тега label.

Возможно в совокупности со стилями, это и был ответ на вопрос о правильности применения атрибутов checked="checked" и unchecked="unchecked" но не понимаю все ровно как обрабатывающий скрипт будет распознавать состояния инпутов. Что касается просто внешнего представления то в этом проблемы нет, моя задача это передавать какоето значение в тег <input type="checkbox" />

atlantis 25.03.2012 12:37
Цитата:
Сообщение от spo
но не понимаю все ровно как обрабатывающий скрипт будет распознавать состояния инпутов
Если просто, то:
if ( $(this).children('[type="checkbox"]').attr('checked') )
проверяет, у дочернего элемента, установлен ли атрибут checked (флажок), и если да, то возвращает "checked" (true), иначе "undefined" (false).


Часовой пояс GMT +3, время: 02:03.