Форум

_marisha · #1 (**permalink**) 02.03.2020, 12:26

Доброго времени суток!
Необходимо при отмеченном чекбоксе произвести смену фона у div.
На данный момент удалось сделать смену только у label и только если кликнуть строго на сам чекбокс.
Если кликнуть на span, то фон не меняется.
Подскажите, пожалуйста, как у div сделать фон при отмеченном чекбокс и при клике на span и input? Спасибо.

<div class="col-lg-3 put_off">
  <label id="bx_117848907_1354_compare_link" class="checkbox-checked">
    <input type="checkbox" data-entity="compare-checkbox">
    <span data-entity="compare-title">Сравнить</span>
  </label>
</div>

$(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');
    }
  });
})

.checkbox-checked {
  background: #FFCC00;
}

рони · #2 (**permalink**) 02.03.2020, 12:37

_marisha,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .checkbox-checked {
  background: #FFCC00;
  }
.put_off label{
      display: block;
      height: 100%;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$('.put_off').on('change', 'input[type="checkbox"]', function(event) {
$(event.delegateTarget).toggleClass('checkbox-checked', this.checked)
}).find('input[type="checkbox"]').trigger('change');
});
  </script>
</head>
<body>
<div class="col-lg-3 put_off">
  <label id="bx_117848907_1354_compare_link">
    <input type="checkbox" data-entity="compare-checkbox">
    <span data-entity="compare-title">Сравнить</span>
  </label>
</div>
<div class="col-lg-3 put_off">
  <label id="bx_117848907_1354_compare_link">
    <input  type="checkbox" data-entity="compare-checkbox" checked="checked">
    <span data-entity="compare-title">Сравнить</span>
  </label>
</div>

</body>
</html>

_marisha · #3 (**permalink**) 02.03.2020, 12:47

рони, спасибо что откликнулись )
Отлично, фон меняется ) Но только меняется если именно кликнуть на чекбокс.
А как сделать чтобы и при клике на сам span фон менялся?
Можно ещё сделать так, но по id:

$(window).load(function() {
  $('input[type="checkbox"]').each(function() {
    if ($(this).prop('checked')) {
      document.getElementById('checkbox').style.backgroundColor = "#FCAC7D";
    }
  });

  $('input[type="checkbox"]').bind("change", function() {
    if ($(this).is(":checked")) {
      document.getElementById('checkbox').style.backgroundColor = "#FCAC7D";
    } else {
      $(this).parent('label').removeClass('checkbox-checked');
      document.getElementById('checkbox').style.backgroundColor = "#fff";
    }
  });
})

Но Ваш пример лучше

рони · #4 (**permalink**) 02.03.2020, 12:57

Сообщение от _marisha

Но только меняется если именно кликнуть на чекбокс.
А как сделать чтобы и при клике на сам span фон менялся?

в каком браузере у вас не работает код из поста #2 ?

_marisha · #5 (**permalink**) 02.03.2020, 13:01

Сообщение от рони

в каком браузере у вас не работает код из поста #2 ?

- в Chrome/Mozilla Ваш пример работает только для чекбокса, но не span.

voraa · #6 (**permalink**) 02.03.2020, 13:03

Быть такого не может

рони · #7 (**permalink**) 02.03.2020, 13:06

_marisha,

рони · #8 (**permalink**) 02.03.2020, 13:07

_marisha,
возможно у вас другая структура, а не та которую вы показали.

_marisha · #9 (**permalink**) 02.03.2020, 13:16

рони, видео

Сообщение от рони

_marisha,
возможно у вас другая структура, а не та которую вы показали.

-

laimas · #10 (**permalink**) 02.03.2020, 14:06

рони, видимо "фон" подразумевает все и за текстом, и label, span должны иметь стиль block.

Форум

Справочник

Discord чат

Курсы javascript