Jquery сделать флажок установленным при удалении другого флажка

Question

Я пытаюсь создать фильтр для вывода некоторых отфильтрованных результатов. Вывод идет в массив. У меня есть четыре флажка. Я был почти в состоянии достичь желаемого результата. Однако я хочу снова установить флажок All Levels, когда не осталось выбранных элементов. Вот что я имею на данный момент. Я новичок в jquery, поэтому мой код должен быть неэффективным. Если кто-то может предложить или улучшить мой код для достижения точно такого же результата, это тоже было бы здорово! Спасибо!

HTML

<div id="course-levels" class="list-group">
   <input type="checkbox" value="all-levels" id="all-levels">
   <input type="checkbox" value="degree" class="group">
   <input type="checkbox" value="pgd" class="group">
   <input type="checkbox" value="hnd" class="group">
</div>

Jquery

<script>

$(document).ready(function(){

// get reference to input elements
var inp = document.getElementsByTagName('input');
var levels = [];

    // if checkboxes under 'group' class is not checked
    if ($('input.group').prop('checked') == false) {
        // make #all-levels default selected checkbox
        $('#all-levels').prop('checked', true);
        // make it readonly
        $("#all-levels").attr('disabled', true);

        // get other input values to levels array
        for (var i=0; i < inp.length; i++) {
            // skip default checkbox value
            if (inp[i].value == 'all-levels') {
                continue;
            }
            levels.push(inp[i].value);
        }
        console.log(levels);
    }

    // if user checked any other checkbox now
    $('input.group').on('click', function () {
        // remove check from default checkbox
        $('#all-levels').prop('checked', false);
        // make it enabled
        $('#all-levels').removeAttr('disabled');

        // get new values to levels array
        levels = $('#course-levels input:checked').not($('#all-levels')).map(function () {
            return this.value;
        }).get();
        console.log(levels);
        }).eq(0).change();

    // if all levels checkbox is clicked again
    $('#all-levels').on('click', function(){
        $('input.group').prop('checked', false);

        // make default checkbox readonly so it will stay default
        $('#all-levels').attr('disabled', true);

        // make array empty
        levels = [];
        // get all input values to levels array
        for (var i=0; i < inp.length; i++) {
            // skip default checkbox value
            if (inp[i].value == 'all-levels') {
                continue;
            }
            levels.push(inp[i].value);
        }
        console.log(levels);

    });

});

</script>

Answer 1

Вы можете сделать это, просто проверив, совпадает ли длина флажка .group с длиной флажка .group или нет, и на основании этого выберите #all-levels снова, например:

$('#all-levels').prop('checked', $('input.group').length === $('input.group:checked').length);

$(document).ready(function() {

  // get reference to input elements
  var inp = document.getElementsByTagName('input');
  var levels = [];

  // if checkboxes under 'group' class is not checked
  if ($('input.group').prop('checked') == false) {
    // make #all-levels default selected checkbox
    $('#all-levels').prop('checked', true);
    // make it readonly
    $("#all-levels").attr('disabled', true);

    // get other input values to levels array
    for (var i = 0; i < inp.length; i++) {
      // skip default checkbox value
      if (inp[i].value == 'all-levels') {
        continue;
      }
      levels.push(inp[i].value);
    }
    console.log(levels);
  }

  // if user checked any other checkbox now
  $('input.group').on('click', function() {
    // remove check from default checkbox
    $('#all-levels').prop('checked', false);
    // make it enabled
    $('#all-levels').removeAttr('disabled');

    // get new values to levels array
    levels = $('#course-levels input:checked').not($('#all-levels')).map(function() {
      return this.value;
    }).get();
    //console.log(levels);
    
    $('#all-levels').prop('checked', $('input.group').length === $('input.group:checked').length);
  }).eq(0).change();

  // if all levels checkbox is clicked again
  $('#all-levels').on('click', function() {
    $('input.group').prop('checked', false);

    // make default checkbox readonly so it will stay default
    $('#all-levels').attr('disabled', true);

    // make array empty
    levels = [];
    // get all input values to levels array
    for (var i = 0; i < inp.length; i++) {
      // skip default checkbox value
      if (inp[i].value == 'all-levels') {
        continue;
      }
      levels.push(inp[i].value);
    }
    console.log(levels);

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="course-levels" class="list-group">
  <input type="checkbox" value="all-levels" id="all-levels">
  <input type="checkbox" value="degree" class="group">
  <input type="checkbox" value="pgd" class="group">
  <input type="checkbox" value="hnd" class="group">
</div>