Как стилизовать чекбоксы, не потеряв функционала?

Question

[Себастьян Перейра]

Здравствуйте.
В продолжение вопроса
Стилизовать чекбоксы

Стилизовал, всё работает. Но появилась трудность.
Не выполняется автоматический поиск при нажатии на чекбокс.
Форма здесь

Если вы с помощью "просмотреть код элемента"(в хроме) отодвинете спан любого инпута, а инпуту дадите display: block - то увидите, что спан таки передает значение cheked инпуту, но ajax не выполняется. Если вы же нажмете на сам инпут (а не на спан), то актион для аякса выполняется.

Подскажите, как решить?

Answer 1

[Сергей Мельников]

почему бы не использовать чисто css для стилизации чекбоксов?
jsfiddle.net/5HCc4

тогда при нажатии на чекбокс можно отловить событие onchange, и вообще он будет работать как надо

Comments

[Себастьян Перейра]

nice! Спасибо!

Answer 2

[Константин Величко]

Попробуйте стилизовать чекбоксы через сторонний плагин. например через этот https://github.com/Dimox/jQueryFormStyler
Сам им пользуюсь, с аяксом работает нормально

Answer 3

[Кирилл Арутюнов]

У меня почему-то не появляется атрибут checked у выбранного чекбокса, если кликать на span (хотя галочка у span появляется).

После того, как выставился checked, можно например вызвать какое-то событие, которое вызовет ajax-запрос.

Answer 4

[Алексей]

JQuery не слышали о таком framework'е? Код упрощается в разы.
Рискну предположить, что событие AJAX у вас привязано к Click input а не к span.

Answer 5

[wdtime_ru]

Есть удобный и легкий плагин для стилизации checkbox. Сам использую в каждом проекте, может кому пригодится: jQuery checkbox.