Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Не могу получить состояние checkbox-а (https://javascript.ru/forum/dom-window/32205-ne-mogu-poluchit-sostoyanie-checkbox.html)

POMAH-UST 07.10.2012 15:05

Не могу получить состояние 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('Не активный');
	});
});

Your 07.10.2012 17:23

http://javascript.ru/forum/dom-windo...ick-mysql.html

POMAH-UST 08.10.2012 06:43

вот рабочий, правда ПОКА без захвата фокуса вариант, 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;
	});
});


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