Форум

ogurchik · #1 (**permalink**) 19.05.2015, 18:11

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

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

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

как я понимаю, проблема во всплытии событий, но уверенности нет. подскажите, в чем проблема, как ее можно устранить? как найти по ней инфу? заранее за помощь большая благодарность.

рони · #2 (**permalink**) 19.05.2015, 18:30

ogurchik,
html минимальный где?

ogurchik · #3 (**permalink**) 20.05.2015, 10:53

<label class="checkbox-checked"><input type="checkbox" checked="true"/>один</label>
<label><input type="checkbox"/>два</label>
<label><input type="checkbox"/>три</label>
<label class="checkbox-checked"><input type="checkbox" checked="true"/>четыре</label>

рони · #4 (**permalink**) 20.05.2015, 11:37

ogurchik,
видимо вы что-то не договаривате ... всё ок
в 1 посте пропущена строка 18

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .checkbox-checked {
    background: #FFCC00;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(window).load(function() {
//проверяет при загрузке страницы, отмечен чекбокс или нет и на отмеченные чекбоксы вешает класс.
    $('input[type="checkbox"]').each(function () {
        if ($(this).prop('checked')) {
            $(this).parent().addClass('checkbox-checked');
        }
     });

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

  </script>
</head>

<body>
<label class="checkbox-checked"><input type="checkbox" checked="true"/>один</label>
<label><input type="checkbox"/>два</label>
<label><input type="checkbox"/>три</label>
<label class="checkbox-checked"><input type="checkbox" checked="true"/>четыре</label>



</body>

</html>

ogurchik · #5 (**permalink**) 20.05.2015, 13:01

тогда наверное дело в чем-то еще в коде. спасибо.

Форум

Справочник

Discord чат

Курсы javascript