Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.10.2012, 16:05
Новичок на форуме
Отправить личное сообщение для POMAH-UST Посмотреть профиль Найти все сообщения от POMAH-UST
 
Регистрация: 19.05.2010
Сообщений: 8

Не могу получить состояние checkbox-а
Всем привет, решил изобрести велосипед и поэксперементировать на стилизацией checkbox-ов, но столкнулся с такой проблемой в невозможности получить состояния checkbox активный/не активный. Всё вроде нормально сам элемент получает аттрибут checked но при проверке элемента никаких изменений нет, натолкните на правильный путь вот код HTML:

<input type="checkbox" name="check1" value="1" id="check1"> Без аттрибута LABEL<br>


вот код jQuery:

$(function() {
	var myCheckbox = $(':checkbox');

	myCheckbox.css({'display':'none'});

	myCheckbox.wrap('<span class="checkbox"></span>');

	myCheckbox.each(function() {
		if($(this).is(':checked')) $(this).parent().addClass('checked');
	});

	var myImgCheckbox = $('.checkbox');

	myImgCheckbox.click(function() {
		if($(this).children().is(':checked')) $(this).children().attr('checked', false).parent().removeClass('checked');
		else $(this).children().attr('checked', true).parent().addClass('checked');
	});

	$('#check1').change(function() {
		if($(this).is(':checked')) alert('Активный');
		else alert('Не активный');
	});
});
Ответить с цитированием
  #2 (permalink)  
Старый 07.10.2012, 18:23
Кандидат Javascript-наук
Отправить личное сообщение для Your Посмотреть профиль Найти все сообщения от Your
 
Регистрация: 03.10.2012
Сообщений: 147

checkbox onclick Mysql
Ответить с цитированием
  #3 (permalink)  
Старый 08.10.2012, 07:43
Новичок на форуме
Отправить личное сообщение для POMAH-UST Посмотреть профиль Найти все сообщения от POMAH-UST
 
Регистрация: 19.05.2010
Сообщений: 8

вот рабочий, правда ПОКА без захвата фокуса вариант, checkbox click и данные передаются правильно проверено в IE6/7/8/9, Opera 12, Mozilla Firefox 3.6.28/15.0.1, Chrome и Safari

$(function() {
	// инициализируем все checkbox-ы и прячем их
	var myCheckbox = $(':checkbox').css({'display':'none'});
	// окружаем все checkbox-ы в элемент span с классом checkbox
	myCheckbox.wrap('<span class="checkbox"></span>');
	// инициализируем все элементы span с классом checkbox
	var myImgCheckbox = $('.checkbox');
	// ищем среди checkbox-ов активные и добавляем элементу span с классом checkbox ещё класс checked
	myCheckbox.each(function() {
		if($(this).is(':checked') && $(this).is(':disabled')) $(this).parent(myImgCheckbox).removeClass('checked').addClass('checkedDisabled');
		else if($(this).is(':disabled')) $(this).parent(myImgCheckbox).addClass('disabled');
		else if($(this).is(':checked')) $(this).parent(myImgCheckbox).addClass('checked');
	});
	// делаем клик на элементе span с классом checkbox
	myImgCheckbox.click(function() {
		// инициализируем checkbox внутри элемента span с классом checkbox
		var myChildren = $(this).children(myCheckbox);
		// если checkbox не закрыт, то работаем по нему
		if(!myChildren.is(':disabled'))
		{
			// проверяем если checkbox активный то:
			if(myChildren.is(':checked')) {
				// убираем аттрибут checked у checkbox-а, а у элемента span удаляем класс checked
				myChildren.attr('checked', false).parent(myImgCheckbox).removeClass('checked');
			}
			else {
				// добавляем аттрибут checked у checkbox-а, а элементу span добавляем класс checked
				myChildren.attr('checked', true).parent(myImgCheckbox).addClass('checked');
			}
			// вешаем на checkbox событие change
			myChildren.trigger('change');
			return false;
		}
	});
	// инициализируем элемент label
	var myLabel = $('label');
	// делаем клик на элементе label
	myLabel.click(function() {
		// инициализируем элемент на котором был сделан клик
		var myLabelThis = $(this);
		// если у элемента label есть аттрибут for то:
		if(myLabelThis.attr('for')) {
			// пробегаемся по всем checkbox-ам
			myCheckbox.each(function() {
				// инициализируем checkbox-ы
				var myCheckboxThis = $(this);
				// если у checkbox-а аттрибут id равен аттрибуту for элемента label и checkbox не закрыт то:
				if((myCheckboxThis.attr('id') == myLabelThis.attr('for')) && !myCheckboxThis.is(':disabled')) {
					// проверяем если checkbox активный то:
					if(myCheckboxThis.is(':checked')) {
						// убираем аттрибут checked у checkbox-а, а у элемента span удаляем класс checked
						myCheckboxThis.attr('checked', false).parent(myImgCheckbox).removeClass('checked');
					}
					else  {
						// добавляем аттрибут checked у checkbox-а, а элементу span добавляем класс checked
						myCheckboxThis.attr('checked', true).parent(myImgCheckbox).addClass('checked');
					}
					// вешаем на checkbox событие change
					myCheckboxThis.trigger('change');
				}
			});
		}
		else
		{
			// если checkbox внутри элемента label не закрыт то:
			if(!myLabelThis.find(myCheckbox).is(':disabled')) {
				// проверяем если checkbox активный то:
				if(myLabelThis.find(myCheckbox).is(':checked')) {
					// убираем аттрибут checked у checkbox-а, а у элемента span удаляем класс checked
					myLabelThis.find(myCheckbox).attr('checked', false).parent(myImgCheckbox).removeClass('checked');
				}
				else {
					// добавляем аттрибут checked у checkbox-а, а элементу span добавляем класс checked
					myLabelThis.find(myCheckbox).attr('checked', true).parent(myImgCheckbox).addClass('checked');
				}
				// вешаем на checkbox событие change
				myLabelThis.find(myCheckbox).trigger('change');
			}
		}
		return false;
	});
});

Последний раз редактировалось POMAH-UST, 08.10.2012 в 09:33.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не могу получить свойство объекта FINoM Общие вопросы Javascript 4 04.12.2011 04:46
Не могу получить ширину объекта(картинки) Cruzer Общие вопросы Javascript 8 28.10.2011 20:18
Не могу получить значение атрибута DenQ jQuery 9 06.02.2011 14:33
Не могу получить id элементов в таблице. LowCoder Общие вопросы Javascript 2 05.07.2009 14:53
Не могу получить высоту из css asci Общие вопросы Javascript 5 30.03.2009 13:31