Форум

spo · #1 (**permalink**) 21.03.2012, 13:10

Делаю кастомный чекбокс.
При клике на 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 · #2 (**permalink**) 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 · #3 (**permalink**) 21.03.2012, 14:21

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

atlantis · #4 (**permalink**) 21.03.2012, 14:30

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

nikita.mmf · #5 (**permalink**) 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 · #6 (**permalink**) 21.03.2012, 15:44

nikita.mmf,
твой пример лучше, но тогда он будет привязан к id, что лично я не совсем люблю

Впрочем пусть сам выбирает.

spo · #7 (**permalink**) 25.03.2012, 12:04

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

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

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

atlantis · #8 (**permalink**) 25.03.2012, 12:37

Сообщение от spo

но не понимаю все ровно как обрабатывающий скрипт будет распознавать состояния инпутов

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

Форум

Справочник

Discord чат

Курсы javascript