Как сделать проверку checked у input?

454

12 апреля 2017, 14:49

У меня есть несколько блоков с классом .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>

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

Answer 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>