[.Тапка.]

подскажите какой-нибудь способ кастомизации чекбоксов с помощью jquery.

я наваяла такое, но он не совсем верно работает. через раз подгружает при загрузке страниц картинку с галочкой. если отмечать чекбокс - снимает классы "checkbox-checked" с остальных чекбоксов.

 $(window).load(function() {
   // после загрузки страницы уже отмеченные чекбоксы заменяются на изображение через присвоение класса
  //(чекбоксы не отображаются, изображение на бекграунде в лейбле)
    $('input[type="checkbox"]').each(function () {
        if ($(this).prop('checked')) {
            $(this).parent().addClass('checkbox-checked');
        }
     });

  //по клику присваивается или удаляется класс который содержит в себе изображение с галочкой
    $('input[type="checkbox"]').bind("change", function(){
      if ($(this).is(":checked")) {
          $(this).parent('label').addClass('checkbox-checked');
      }
      else {
         $(this).parent('label').removeClass('checkbox-checked');
      }
    });

за помощь буду очень благодарна

@темы: Jquery, HTML, CSS

Comments

[alhames]

Не совсем понял в чем проблема.. Как переключать активность можно взять из bootstrap:
github.com/twbs/bootstrap/blob/master/js/button...

Просто засовываете checkbox в label и делаете его невидимым - а на клик по label еще можете навесить toggleClass('active')..
change - не очень удачное событие в данном случае.. И зачем вам навешивать классы при инициализации - не проще вручную проставить?

[.Тапка.]

alhames, класс навешивается для того что бы сразу при загрузке страницы отмеченными отображались те чекбоксы, которые загрузились из бд с checked = true
за наводку с бутстрапом спасибо большое! как то не подумала про него даже)

[alhames]

.Тапка.,

сразу при загрузке страницы отмеченными отображались те чекбоксы, которые загрузились из бд с checked = true

Ну а как вы им checked проставляете? Также проставляйте и active для label да и все.
В крайнем случае можно конечно и в each() пройтись, но зачем, когда проставить можно все заранее?
И да, $(window).load() насколько я понимаю срабатывает после загрузки всех элементов страницы, а значит если какая-нибудь картинка или счетчик будут тупить, то он может и не выполнится вовсе. Лучше используйте ready

[.Тапка.]

alhames, ну проблема основная в том что обработчки клика как-то не так работает. если выбрать один чекбокс, он снимает галочки со всех остальных.

[alhames]

.Тапка., jsfiddle.net/6g2v6xav/