При выделении всех чекбоксов отметить и чекбокс 'Все' с помощью js

Question

Есть несколько чекбоксов:

Главный, при нажатии на который ставятся/убираются все галочки

<label htmlFor='all' className='check'>
    <input id='all' type="checkbox" value='Все' 
            className='checkInput mainCheckbox'
            defaultChecked={flagCheckbox}
            onChange={changeMainChekbox}
                />
    <span className='checkBox' />
    <span className='text'>
        Все
    </span>
</label>

остальные чекбоксы ( 4шт )

<label htmlFor={name} className='check'>
    <input id={name} type="checkbox" value={value} 
            className='checkInput otherCheckbox'
            onChange={changeAllChekbox}
            defaultChecked={checkState}
                />
    <span className='checkBox' />
    <span className='text'>{value}</span>
</label>

необходимо сделать так, чтобы при выделении всех 4 чекбоксов с классом 'otherCheckbox' отмечался главный чекбокс с классом 'mainCheckbox' если при включенном чекбоксе 'mainCheckbox' снимается любой другой чекбокс 'otherCheckbox' - чекбокс 'mainCheckbox' тоже снимается

пробовала проверять состояние чекбокса 'otherCheckbox', если true, то добавлять этот инпут в массив, потом планировала проверять длину этого массива, если она = 4, то ставить чекбокс 'mainCheckbox' в активное состояние, но в массиве у меня всегда оказывался только один инпут

Answer 1

Можно сделать так

let allCheckBox = document.querySelector('.mainCheckbox');
let otherCheckBoxes = document.querySelectorAll('.otherCheckbox');

otherCheckBoxes.forEach(item=>{   
  item.addEventListener("click", function(){                  
      let checkBoxes = document.querySelectorAll('.otherCheckbox:checked');
      allCheckBox.checked = checkBoxes.length == otherCheckBoxes.length;
    })
});


allCheckBox.addEventListener("click", function(){
  otherCheckBoxes.forEach(item=> item.checked = allCheckBox.checked) 
})

<label htmlFor='all' class='check'>
    <input id='all' type="checkbox" class='checkInput mainCheckbox' />
    <span class='checkBox' />
    <span class='text'>Все</span>
</label>

<label htmlFor='first' class='check'>
    <input id='first' type="checkbox" class='checkInput otherCheckbox' />
    <span class='checkBox' />
    <span class='text'>1</span>
</label>

<label htmlFor='second' class='check'>
    <input id='second' type="checkbox" class='checkInput otherCheckbox' />
    <span class='checkBox' />
    <span class='text'>2</span>
</label>


<label htmlFor='third' class='check'>
    <input id='third' type="checkbox" class='checkInput otherCheckbox' />
    <span class='checkBox' />
    <span class='text'>3</span>
</label>


<label htmlFor='fourth' class='check'>
    <input id='fourth' type="checkbox" class='checkInput otherCheckbox' />
    <span class='checkBox' />
    <span class='text'>4</span>
</label>

БЛОГ НА HUSL

При выделении всех чекбоксов отметить и чекбокс 'Все' с помощью js

Ответы (1 шт):