Как посчитать количество checked checkbox и вывести результат?

const selectSingle = document.querySelector('.__select');
const selectSingle_title = selectSingle.querySelector('.__select__title');
const selectSingle_labels = selectSingle.querySelectorAll('.__select__label');

selectSingle_title.addEventListener('click', () => {
  if ('active' === selectSingle.getAttribute('data-state')) {
    selectSingle.setAttribute('data-state', '');
  } else {
    selectSingle.setAttribute('data-state', 'active');
  }
});

.__select {
  position: relative;
  width: 230px;
  height: 40px;
  margin: 0 auto;
}

.__select[data-state=active] .__select__title::before {
  transform: translate(-3px, -50%) rotate(-45deg);
}

.__select[data-state=active] .__select__title::after {
  transform: translate(3px, -50%) rotate(45deg);
}

.__select[data-state=active] .__select__content {
  opacity: 1;
}

.__select[data-state=active] .__select__label+.__select__input+.__select__label {
  max-height: 40px;
  border-top-width: 1px;
}

.__select__title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 8px 16px;
  border-radius: 5px;
  border: solid 1px #c7ccd1;
  cursor: pointer;
}

.__select__title::before,
.__select__title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  display: block;
  width: 10px;
  height: 2px;
  transition: all 0.3s ease-out;
  background-color: #333333;
  transform: translate(-3px, -50%) rotate(45deg);
}

.__select__title::after {
  transform: translate(3px, -50%) rotate(-45deg);
}

.__select__title:hover {
  border-color: #D8093A;
}

.__select__title:hover::before,
.__select__title:hover::after {
  background-color: #D8093A;
}

.__select__content {
  position: absolute;
  top: 40px;
  left: 3px;
  display: flex;
  flex-direction: column;
  width: calc(100% - 6px);
  background-color: #ffffff;
  border: 1px solid #c7ccd1;
  border-top: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: all 0.3s ease-out;
  opacity: 0;
  z-index: 8;
}

.__select__input {
  display: none;
}

.__select__input:checked+label {
  background-color: #dedede;
}

.__select__input:disabled+label {
  opacity: 0.6;
  pointer-events: none;
}

.__select__label {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  transition: all 0.2s ease-out;
  cursor: pointer;
  overflow: hidden;
}

.__select__label+input+.__select__label {
  border-top: 0 solid #C7CCD1;
}

.__select__label:hover {
  background-color: #D8093A !important;
  color: #ffffff;
}

<form>
  <div class="__select" data-state="">
    <div class="__select__title">Выберите из списка...</div>
    <div class="__select__content">
      <input id="singleSelect1" class="__select__input" type="checkbox" name="singleSelect" />
      <label for="singleSelect1" class="__select__label">Option 1</label>
      <input id="singleSelect2" class="__select__input" type="checkbox" name="singleSelect" disabled />
      <label for="singleSelect2" class="__select__label">Option 2 (disabled)</label>
      <input id="singleSelect3" class="__select__input" type="checkbox" name="singleSelect" />
      <label for="singleSelect3" class="__select__label">Option 3</label>
      <input id="singleSelect4" class="__select__input" type="checkbox" name="singleSelect" />
      <label for="singleSelect4" class="__select__label">Option 4</label>
      <input id="singleSelect5" class="__select__input" type="checkbox" name="singleSelect" />
      <label for="singleSelect5" class="__select__label">Option 5</label>
      <input id="singleSelect6" class="__select__input" type="checkbox" name="singleSelect" />
      <label for="singleSelect6" class="__select__label">Option 6</label>
      <input id="singleSelect7" class="__select__input" type="checkbox" name="singleSelect" />
      <label for="singleSelect7" class="__select__label">Option 7</label>
    </div>
  </div>
</form>