Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.03.2012, 13:10
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Кастомный чекбокс и передача значения 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;
}
Ответить с цитированием
  #2 (permalink)  
Старый 21.03.2012, 14:13
Аспирант
Отправить личное сообщение для atlantis Посмотреть профиль Найти все сообщения от atlantis
 
Регистрация: 18.03.2012
Сообщений: 95

$('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;
});

Не проверял. Но должно работать.
Ответить с цитированием
  #3 (permalink)  
Старый 21.03.2012, 14:21
Аспирант
Отправить личное сообщение для atlantis Посмотреть профиль Найти все сообщения от atlantis
 
Регистрация: 18.03.2012
Сообщений: 95

И ещё по поводу <label for="new-window">...
Незнаю как поведёт себя скрипт, если будет много чекбоксов с id="new-window" и <label for="new-window">, т.е. по идее если нажмёш на один, то все они изменят значение. Тогда тебе понадобится указывать разные значения for и id, но тогда скрипт (что я написал) не будет работать.
Лучше просто убери for у label и тогда должно работать нормально. Только id у чекбокса оставь.
Ответить с цитированием
  #4 (permalink)  
Старый 21.03.2012, 14:30
Аспирант
Отправить личное сообщение для atlantis Посмотреть профиль Найти все сообщения от atlantis
 
Регистрация: 18.03.2012
Сообщений: 95

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

Последний раз редактировалось atlantis, 21.03.2012 в 15:58.
Ответить с цитированием
  #5 (permalink)  
Старый 21.03.2012, 15:02
Профессор
Отправить личное сообщение для nikita.mmf Посмотреть профиль Найти все сообщения от nikita.mmf
 
Регистрация: 01.02.2010
Сообщений: 364

<!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>
Ответить с цитированием
  #6 (permalink)  
Старый 21.03.2012, 15:44
Аспирант
Отправить личное сообщение для atlantis Посмотреть профиль Найти все сообщения от atlantis
 
Регистрация: 18.03.2012
Сообщений: 95

nikita.mmf,
твой пример лучше, но тогда он будет привязан к id, что лично я не совсем люблю
Впрочем пусть сам выбирает.
Ответить с цитированием
  #7 (permalink)  
Старый 25.03.2012, 12:04
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

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

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

Возможно в совокупности со стилями, это и был ответ на вопрос о правильности применения атрибутов checked="checked" и unchecked="unchecked" но не понимаю все ровно как обрабатывающий скрипт будет распознавать состояния инпутов. Что касается просто внешнего представления то в этом проблемы нет, моя задача это передавать какоето значение в тег <input type="checkbox" />
Ответить с цитированием
  #8 (permalink)  
Старый 25.03.2012, 12:37
Аспирант
Отправить личное сообщение для atlantis Посмотреть профиль Найти все сообщения от atlantis
 
Регистрация: 18.03.2012
Сообщений: 95

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Передача значения из функции в функцию wine-time Общие вопросы Javascript 4 18.09.2011 17:39
Передача значения в форму denisok82 jQuery 7 07.07.2011 10:45
передача значения SRC в текстовое поле <INPUT> dimi007 jQuery 2 10.05.2011 11:00
Передача полю объекта - массиву, значения элемента через set метод poorking Общие вопросы Javascript 1 13.02.2011 20:22
Передача значения ssh AJAX и COMET 4 21.02.2010 21:59