Вы можете сравнить общий флажок с количеством отмеченных флажков, если обе длины одинаковы, тогда установите флажок checked свойство в true, в противном случае установите false:
var selectedCount = document.querySelectorAll('.select-me:checked').length;
if(checkBoxes.length == selectedCount){
selectallBox.checked = true;
}
else{
selectallBox.checked = false;
}
var expanded = false;
var selectBox = document.querySelector('.selectBox')
selectBox.addEventListener('click', function(){
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
});
var selectallBox = document.getElementById('selectall');
var checkBoxes = document.querySelectorAll('.select-me');
selectallBox.addEventListener('click', function() {
for (let i = 0; i < checkBoxes.length; i++) {
if (checkBoxes[i] != selectallBox)
checkBoxes[i].checked = selectallBox.checked;
}
})
for (var i = 0; i < checkBoxes.length; i++) {
checkBoxes[i].addEventListener('click', function() {
var selectedCount = document.querySelectorAll('.select-me:checked').length;
if(checkBoxes.length == selectedCount){
selectallBox.checked = true;
}
else{
selectallBox.checked = false;
}
});
}
document.querySelector('.close-check-box').addEventListener('click' , function(){
checkboxes.style.display = 'none'
})
.multiselect {
width: 400px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px rgb(169, 169, 169) solid;
padding-top: 10px;
border-radius: 5px;
margin-top: 10px;
height: 200px;
overflow-y: scroll;
}
label {
display: block;
}
select {
padding: 6px 12px;
border-radius: 5px;
}
.close-check-box:link,
.close-check-box:visited {
padding: 1px 25px;
text-decoration: none;
font-weight: 300;
background-color: #3498db;
border: 1px solid #3498db;
color: #fff;
margin-left: 14px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
margin-top: 10px;
margin-bottom: 20px;
display: inline-block;
}
hr.style-two {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(169, 169, 169, 0), rgba(169, 169, 169, 0.75), rgba(169, 169, 169, 0));
}
<form method="GET">
<div class="multiselect">
<div class="selectBox">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="selectall">
<input type="checkbox" id="selectall" / class="mr-3 ml-3">Select All</label>
<hr class="style-two">
<label for="one">
<input type="checkbox" name="checkbox1" value="1" id="one" / class="mr-3 ml-3 select-me">First</label>
<label for="two">
<input type="checkbox" name="checkbox2" value="2" id="two" / class="mr-3 ml-3 select-me">Second</label>
<label for="three">
<input type="checkbox" name="checkbox3" value="3" id="three" / class="mr-3 ml-3 select-me">First</label>
<label for="four">
<input type="checkbox" name="checkbox4" value="4" id="four" / class="mr-3 ml-3 select-me">Second</label>
<label for="five">
<input type="checkbox" name="checkbox5" value="5" id="five" / class="mr-3 ml-3 select-me">First</label>
<label for="six">
<input type="checkbox" name="checkbox6" value="6" id="six" / class="mr-3 ml-3 select-me">Second</label>
<label for="seven">
<input type="checkbox" name="checkbox7" value="7" id="seven" / class="mr-3 ml-3 select-me">First</label>
<label for="eight">
<input type="checkbox" name="checkbox8" value="8" id="eight" / class="mr-3 ml-3 select-me">Second</label>
<label for="nine">
<input type="checkbox" name="checkbox9" value="9" id="nine" / class="mr-3 ml-3 select-me">First</label>
<label for="ten">
<input type="checkbox" name="checkbox10" value="10" id="ten" / class="mr-3 ml-3 select-me">Second</label>
<a class="close-check-box" href="#">click</a>
</div>
</div>
<button type="submit">submit</button>
</form>