Action привязка span к checkbox?

Question

[Андрей]

<ul class="zn_check_list">
	<li>
		<span class="checkbox" style="background-position: 0px 0px;"></span>
		<input id="a" style="display:none" type="checkbox" name="uslugiForm">
		<label for="a"> Выезд и оценка</label>
	</li>
	<li>
		<span class="checkbox" style="background-position: 0px 0px;"></span>
		<input id="b" style="display:none" class="styled" type="checkbox" name="uslugiForm">
		<label for="b"> Доставка</label>
	</li>
</ul>

То есть, оформление чекбокса стоит в span. При нажатии должно выводить дополнительную форму. Но работает только при клике на label.
Как заставить и span при клике делать тоже самое?
Сам JS

$('ul.zn_check_list li input[name="uslugiForm"]').click(function(){
		if( $('ul.zn_check_list li input[name="uslugiForm"]').is(':checked')) {
        	$("ul.zn_check_list_inputZakaz").show(200);
		} else {
			$("ul.zn_check_list_inputZakaz").hide(100);
		}
	})

Answer 1

[Юрий Лобанов]

Не самый лучший способ, но с меньшими проблемами - поставьте span внутрь label (красным цветом ваши спаны)
jsfiddle.net/iiil/6U6bB/2

upd:
На самом деле все просто )

$('ul.zn_check_list li input[name="uslugiForm"], span.checkbox').click(function(){
		if( $('ul.zn_check_list li input[name="uslugiForm"]').is(':checked')) {
        	$("ul.zn_check_list_inputZakaz").show(200);
		} else {
			$("ul.zn_check_list_inputZakaz").hide(100);
		}
	})

Проверил через консоль - работает. Попробуйте.

Запарился, сделал пример. Все точно работает. Ищи где и что сделали не так.
jsfiddle.net/iiil/ts8G7/5

Comments

[Андрей]

В стилизации чекбокса задействован ещё скрипт www.mnogonoga.ru/js/checkbox_radio.js
И если span запихать внутрь label, чекбокс вообще не работает. z-index не помогает.

[Юрий Лобанов]

@Mnogonoga выложите полный пример на jsfiddle.net или хотя бы киньте ссылку на сайте, где делаете эти чекбоксы.

[Андрей]

mnogonoga.ru/clicont/left_catalog.html - блок Заказать услугу

[Юрий Лобанов]

@Mnogonoga изменил ответ.

[Андрей]

@iiil upd не работает. Первый пункт сделал span внутри label

[Юрий Лобанов]

@Mnogonoga Вы сделали и то, и другое? Оставьте спан как был, не вносите внутрь лэйбла. Просто измените код js. Должно работать, в консоли все прекрасно работает.

[Андрей]

@iiil Пробовал так и так.

[Юрий Лобанов]

@Mnogonoga Вы можете выложить на сайт (на который кидали ссылку) вариант с новым js (span пусть будет там, где был, то есть вне лейбла) и отпишитесь. Не могу сказать, что не работает, потому что все ведь просто. В консоли все работает.

[Юрий Лобанов]

@Mnogonoga вижу, что уже сделали это. Сейчас посмотрю

[Юрий Лобанов]

@Mnogonoga изменил вопрос, см. последнюю ссылку, все работает.

[Андрей]

@iiil Добавил перед скриптом $(window).load(function(){ ... }); Заработало.

[Юрий Лобанов]

@Mnogonoga ну ясно, все дело в том, что вызывали до того, как сформировался DOM. Хотя вроде в функции у Вас все правильно прописано, $(function(){...}

[Юрий Лобанов]

@Mnogonoga не забудьте отметить вопрос решенным.

[Андрей]

@iiil Спасибо)

Answer 2

[lnked]

посмотри мое решение без скриптов lnked.ru/css/stilizovannyy_checkbox_bez_javascript