0

У меня есть несколько блоков с классом .box-check , в каждом из блоков находятся несколько label с input. Мне нужно сделать проверку на checked у инпутов и если инупт отмечен, добавлять произвольный класс основному родителю (.box-check) этого инпута. Пока один из инпутов отмечен - класс существует, как только со всех инпутов выделения сняты - удалять класс у родителя.

Вот структура кода, но он почему-то не работает:

.box-check {
  border: 1px solid red;
  padding: 10px;
  margin-bottom: 10px;
}

.box-check label {
  display: block;
}

.custom-class {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="box-check">
  <div class="bbox">
    <div class="box-check-cont">

      <div class="check">
        <label for="check-1">
																		<input id="check-1" class="element-checkbox" name="check-1" value="Motul" type="checkbox">
																		<span>Масло</span>
																	</label>
        <label for="check-2">
																		<input id="check-2" class="element-checkbox" name="check-2" value="Motul" type="checkbox">
																		<span>Motul</span>
																	</label>
        <label for="check-3">
																		<input id="check-3" class="element-checkbox" name="check-3" value="Rowe" type="checkbox">
																		<span>Rowe</span>
																	</label>

      </div>
    </div>
  </div>
</div>
<div class="box-check">
  <div class="bbox">
    <div class="box-check-cont">

      <div class="check">
        <label for="check-11">
																		<input id="check-11" class="element-checkbox" name="check-11" value="Motul" type="checkbox">
																		<span>Масло</span>
																	</label>
        <label for="check-22">
																		<input id="check-22" class="element-checkbox" name="check-22" value="Motul" type="checkbox">
																		<span>Motul</span>
																	</label>
        <label for="check-33">
																		<input id="check-33" class="element-checkbox" name="check-33" value="Rowe" type="checkbox">
																		<span>Rowe</span>
																	</label>

      </div>
    </div>
  </div>
</div>

<script>
//Проверка при загрузке документа
  var ckbox = $('.box-check input');
  if (ckbox.is(':checked')) {
    $(this).parent('.box-check').addClass('custom-class');
  } else {
    $(this).parent('.box-check').removeClass('custom-class');
  }
  //Нужно ещё сделать проверка при клике.. Возможно это можно сделать одной функцией
</script>

Выручите, пожалуйста.

4

2 ответа 2

1

Вы забыли навесить событие на изменения чекбокса, чтобы убрать класс (желтый цвет), придется проверить все чекбоксы на галочки, циклом например.

Обновлено

$(function() {

  $("input").change(function() {

    //сформируем массив галочек
    var block = $(this).closest('.check');
    var checked = block.find('input').map(function(index, elem) {
      return elem.checked;
    });

    //преобразуем в массив
    checked = checked.get();

    //проверим на вшивость
    var galki = checked.some(function(el) {
      return el;
    });

    //выполним действие
    if (galki == true) {
      $(this).closest('.box-check').addClass('custom-class');
    } else {
      $(this).closest('.box-check').removeClass('custom-class');
    }
  });
});
.box-check {
  border: 1px solid red;
  padding: 10px;
  margin-bottom: 10px;
}

.box-check label {
  display: block;
}

.custom-class {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-check">
  <div class="bbox">
    <div class="box-check-cont">

      <div class="check">
        <label for="check-1">
						<input id="check-1" class="element-checkbox" name="check-1" value="Motul" type="checkbox">
						<span>Масло</span>
					</label>
        <label for="check-2">
						<input id="check-2" class="element-checkbox" name="check-2" value="Motul" type="checkbox">
						<span>Motul</span>
					</label>
        <label for="check-3">
						<input id="check-3" class="element-checkbox" name="check-3" value="Rowe" type="checkbox">
						<span>Rowe</span>
					</label>

      </div>
    </div>
  </div>
</div>
<div class="box-check">
  <div class="bbox">
    <div class="box-check-cont">

      <div class="check">
        <label for="check-11">
						<input id="check-11" class="element-checkbox" name="check-11" value="Motul" type="checkbox">
						<span>Масло</span>
					</label>
        <label for="check-22">
						<input id="check-22" class="element-checkbox" name="check-22" value="Motul" type="checkbox">
						<span>Motul</span>
					</label>
        <label for="check-33">
						<input id="check-33" class="element-checkbox" name="check-33" value="Rowe" type="checkbox">
						<span>Rowe</span>
					</label>

      </div>
    </div>
  </div>
</div>

6
  • Спасибо, но только если снять один чекбокс а остальные отмечены - класс удаляется... Нужно чтобы класс с фоном удалялся только после того, как отметки будут сняты.. 11 апр 2017 в 13:50
  • @Александр ну так выше сказано, проверьте все чекбоксы, или за вас код написать? 11 апр 2017 в 13:53
  • В этом то и проблема, что не знаю как проверить все чекбоксы.. 11 апр 2017 в 14:07
  • $(':checkbox:checked' ).each(function(){ $(this).closest('.box-check').addClass('custom-class'); }); При загрузке так проверяю , а вот с проверкой на все чекбоксы пока не разберусь 11 апр 2017 в 14:15
  • @Александр начали думать правильно насчет each, обновил ответ с решением 11 апр 2017 в 14:33
0

Выбирай:

this.checked
$(this).prop('checked')
$(this).is(':checked')

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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