0

Идея такая - есть элемент, внутри него есть чекбокс. При нажатии на элемент меняется состояние внутреннего чекбокса и цвет фона элемента. Как это сделать на jQuery?

.terms-conditions {
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="terms-conditions">
  <input class="check-terms" type="checkbox" checked name="terms" required>
  <p>I accept the Terms and Conditions</p>
</div>

0

2 ответа 2

0

Есть такой вариант, конечно, это не панацею, возможно есть более короче код:

$('.terms-conditions').click(function() {
  if ($('input.check-terms').is(':checked')) {
    $('input.check-terms').attr('checked', false);
    $('.terms-conditions').css({
      'background-color': 'red'
    });
  } else {
    $('input.check-terms').attr('checked', true);
    $('.terms-conditions').css({
      'background-color': 'blue'
    });
  }
});
.terms-conditions {
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="terms-conditions">
  <input class="check-terms" type="checkbox" checked name="terms" required>
  <p>I accept the Terms and Conditions</p>
</div>

0

Если вдруг захотите это же самое сделать без jQuery/javascript

label {
  display: block;
  position: relative;
}

label div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fafafa;
  z-index: -1;
}

label span {
  user-select: none;
  position: relative;
}

label input {
  position: relative;
}

input:checked~div {
  background: red;
}

input:checked~span {
  color: #fff;
}
<label>
  <input type="checkbox">
  <div></div>
  <span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae, sit!</span>
</label>

<label>
  <input type="checkbox">
  <div></div>
  <span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae, sit!</span>
</label>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.