Как сделать, чтобы при нажатии на все чекбоксы, чекбокс «выбрать все» был активным?

Question

kadirovdenis123 @kadirovdenis123

JavaScript

Как сделать, чтобы при нажатии на все чекбоксы, чекбокс «выбрать все» был активным?

Решил сделать задачу с чекбоксами на сайте. Чтобы при нажатии на чекбокс "Выбрать все" выделялись все. Это я реализовал, после этого я захотел сделать так, чтобы при клике на все обычные чекбоксы, выделялся основной. Как это сделать?

HTML

<div class="requests">
	<div class="font-500 fsize-20 pb-2">Заявки</div>
  <div class="font-text  pb-2">
    <input type="checkbox" id="requests_checkbox-main" class="form-check-input">
    <label for="name">Выделить все</label>
  </div>
  <div class="font-text pb-1">
    <input type="checkbox" id="requests_checkbox" class="form-check-input" name="permissions[]" value="">
    <label class="form-check-label" for="exampleCheck">Item</label>
  </div>
  <div class="font-text pb-1">
    <input type="checkbox" id="requests_checkbox" class="form-check-input" name="permissions[]" value="">
    <label class="form-check-label" for="exampleCheck">Item</label>
  </div>
</div>

JS

// requests
const requests = {
    'cont': document.querySelector(".requests"),
    'main': document.querySelector("#requests_checkbox-main"),
    'common': document.querySelectorAll("#requests_checkbox"),
    'chk_num': 0,
    'sum': 0
}

function active_main() {
    for(let i=0; i<requests['common'].length;i++) {  
        requests['common'][i].addEventListener('change', () => {
            if(this.checked == true &&this.length == requests['chk_num']) {
                requests['main'].checked = true;
            }
            requests['chk_num']++;
            console.log(requests['chk_num']);
        });
    }
   
}

function check_on(object) {
    var listener = function (event) {
        if(this.id == "requests_checkbox") {
            requests['main'].checked = false;
        }
    }
    for(let i=0; i<requests['common'].length;i++) {
        requests['common'][i].checked = true;
        requests['common'][i].addEventListener('change', listener, false);
    }
        
}
function check_off(object) {
    requests['chk_num'] = 0;
    for(let i=0; i<requests['common'].length;i++) {
        requests['common'][i].checked = false;
        
    }
}

var checkbox = document.querySelector("input[type=checkbox]");

checkbox.addEventListener('change', function() {
    // requests
    active_main();
    if (this.checked && this.id == "requests_checkbox-main") {
        check_on(requests);
    }
    else if(this.checked == false && this.id == "requests_checkbox-main"){
        check_off(requests);
    }
    
});