JSFiddle - React, Tailwind, and code Playground

HTML

<form id="yyy">
    <input name="checkbox" type="checkbox" onclick="checkTotalCheckedBoxes()">1</input>
    <input name="checkbox" type="checkbox" onclick="checkTotalCheckedBoxes()">2</input>
    <input name="checkbox" type="checkbox" onclick="checkTotalCheckedBoxes()">3</input>
    <input name="checkbox" type="checkbox" onclick="checkTotalCheckedBoxes()">4</input><br />
</form>

<input type="checkbox" onclick="toggle(this)">Select all</input>

<div id="count">0 boxes are checked.</div>

JavaScript

function checkTotalCheckedBoxes()
{
     var checkLength = 0;
     var boxes = document.getElementById("yyy").getElementsByTagName("input");
     for (var i = 0; i < boxes.length; i++)
     {
         boxes[i].checked ? checkLength++ : null;
     }
     document.getElementById("count").innerHTML = checkLength + " boxes are checked.";
}

function toggle(source) {
  checkboxes = document.getElementsByName('checkbox');
  for(var i=0; i < checkboxes.length;i++) {
    checkboxes[i].checked = source.checked;
  } 
  checkTotalCheckedBoxes();
}