Если все input checkbox в классе - checked то элемент сделать cheked

618

24 ноября 2016, 09:52

Есть форма с чекбоксами, и есть отдельный чекбокс - отметить все

Работает все гуд, но еще мне нужно, чтобы при загрузке страницы было условие - Если все чекбоксы конкретного блока "чекнуты" - чекнуть конкретный input - Все уведомления. Каким образом можно сделать это на jquery ?

Вот таким образом отмечаю все чекбоксы -

$("#notificationsettings-mail_all").change(function () {
  $("#notification_mail input:checkbox").prop('checked',$(this).prop("checked"));
  $('#notification_form').submit();
});

Answer 1

Выберите чекбоксы с селектором :not(:checked) и посмотрите на длину полученного списка

$("#notificationsettings-mail_all").change(function() { 
  $("#notification_mail input:checkbox").prop('checked', $(this).prop("checked")); 
  $('#notification_form').submit(); 
}); 
 
$("#notification_mail input:checkbox").change(function() { 
  $("#notificationsettings-mail_all").prop( 
    'checked', 
    $("#notification_mail input:checkbox:not(:checked)").length == 0 
  ); 
}); 
 
$(document).ready(function() { 
  $("#notification_mail input:checkbox:first").trigger("change"); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input id="notificationsettings-mail_all" type="checkbox" /> 
<label for="notificationsettings-mail_all">Check All</label> 
<br /> 
<div id="notification_mail"> 
  <input id="check_1" type="checkbox" checked="checked" /> 
  <label for="check_1">Check 1</label> 
  <br /> 
  <input id="check_2" type="checkbox" checked="checked" /> 
  <label for="check_2">Check 2</label> 
  <br /> 
  <input id="check_3" type="checkbox" checked="checked" /> 
  <label for="check_3">Check 2</label> 
  <br /> 
</div>