[Рецепты] Стилизованные, кроссбраузерные элементы форм. - Дизайн и оформление

Считаю идею не совсем удачной. Тем более для новичков. Смысл подключения стороннего скрипта js.
Если js использоваться совсем не будет.Нарисуйте в чем проблема.

Нарисуйте в чем проблема.

1) Почему div? Мне одному кажется что это строчный элемент а не блочный? И как теперь засунуть чекбокс в абзац? DTD не позволит ведь! И браузеры тоже.

2) Раз уж мы завязываем все на js, то не лучше ли подменять нативные чекбоксы псевдочекбоксами динамически, средствами js ?

3) В коде полная антисанитария! Зачем функцию checking объявлять в глобальном контексте? Зачем ее вообще объявлять, тоесть оборачивать в нее код, который вызывается всего один раз?

А так же смотрим код:

Еще, я думаю всем привычней писать знак доллара вместо jQuery. В таком случае ваш код полезен и для чисто jQuery окружения, и для noconflict режима:

В догонку: посмотрел пример с лэйблом... Тоесть теперь я не могу создать полноценный label ? НО ПОЧЕМУ???

Я извиняюсь.
А можно уточнить каким образом именно эта тема относится к ЖШ ? Она имеет четкий критерий привязки к ЖШ ? с какого бока ?
Не спорю новичкам возможно полезно, но реально к ЖШ не имеет отношения.
Тут ведь не курсы повышения квалификации. Есть отдельные разделы форума для таких обсуждений

div - это блочный элемент.

Раз уж вы за логику, то не надо засовывать чекбокс в абзац, ибо <p>.. - определяет текстовый абзац.

Лучше, но основная идея состоит в другом. Я за то, что бы понимать что и почему происходит. По этому рецепт показывает все "движения" внутри. Динамическая замена - это следующий шаг.

Про функцию - согласен только при частных случаях. Алгоритм был взят из более сложного случая, где функцию требовалось вызывать несколько раз.

Потому что не обязательно все ограничится сменой атрибута.

(function($){
	// вешаем наш код на domready
	$(document).ready(function(){
		// инициализация состояния псевдочекбоксов
		$(".checkbox").each(function(){
			var checked = $('input', this).is(':checked');
			$(this).toggleClass('checked', checked);
		});
		// оживляем псеводчекбоксы
		$(".checkbox").click(function(){
			var checked = $('input', this).is(':checked');
			$(this).toggleClass('checked', !checked);
			$('input', this).attr('checked', !checked);
		});
	});	
})(jQuery);

function checking() {
// функция проверяет состояние настоящего чекбокса
// и устанавливает стиль для соответствующего псевдо-чекбокса
    jQuery.each(jQuery(".checkbox"),
            function(){
                if(jQuery(this).find("input").is(':checked')){
                    jQuery(this).addClass("checked");
                }else{
                    jQuery(this).removeClass("checked");
                }
            }
    );
}
 
jQuery(document).ready(
        function(){
            checking(); // функция проверки запустится при загрузке страницы
            jQuery(".checkbox").click(
                    // скрипт будет менять состояние настоящего чекбокса 
                    // и стиль псевдо-чекбокса при клике по нему
                    function(){
                        jQuery(this).toggleClass("checked");
                        if(jQuery(this).find("input").is(':checked')){
                            jQuery(this).find("input").attr("checked", false);
                        }else{
                            jQuery(this).find("input").attr("checked", true);
                        }
                    }
            );
        }
);

Я имел ввиду, что нативный чекбокс - строчный элемент, так зачем его заменять блочным? Чем span не угодил?

По сути вы объявляете window.checking - зачем этот метод объекту window?

Ведь это короче и яснее чем

$('input', this)...

Код: javascript

$(".checkbox").each(function(){
			var checked = $('input', this).is(':checked');
			$(this).toggleClass('checked', checked);
		});

 $.each($(".checkbox"),function(){
                            if($(this).find("input").is(':checked')){
                                $(this).addClass("checked");
                            }
                        }
                );

Некорректно использовать так

$('div.foo').click(function() {
  $('span', this).addClass('bar');
});

И все таки я склоняюсь к конструкции с условием if/else. Что если помимо псевдо-чекбокса надо будет еще что-нибудь "оживить".

Почему это? не работает чтоли? и $('selector').each() - разве нет такого метода?

$('input', this)...

$(this).find("input")...

Есть, но я не об этом, а о том что:

Так не корректно,

Код: javascript

$('input', this)...

а надо так:

Код: javascript

$(this).find("input")...

Selector Context
By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function. For example, to do a search within an event handler, the search can be restricted like so:

$('div.foo').click(function() {
  $('span', this).addClass('bar');
});
When the search for the span selector is restricted to the context of this, only spans within the clicked element will get the additional class.

Internally, selector context is implemented with the .find() method, so $('span', this) is equivalent to $(this).find('span').

Так все работает ведь