Jquery make checkbox checked on other checkbox removal

Question

I'm trying to make a filter to output some filtered results. The output goes to an array. I have four checkboxes. I was almost able to achieve the result I wanted. However, I want to make the All Levels checkbox checked again when there is no selections left. Here is what I have at the moment. I'm new to jquery so my code must be not efficient. If one can suggest or improve my code to achieve exact same result that would be great too! Thanks!

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

You can do this simply by checking if all the .group checkbox length is same as checked .group checkbox length or not and based on that make #all-levels selected again like:

$('#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>