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

Question

[zhigunov13]

Задача: сделать так, чтобы в "__select__title" выводилось количество чекбоксов со значением "checked", а если ничего не выбрано, то вывести "Выберите из списка..."

Наверное, подсчет чекбоксов со значением "checked" можно сделать с помощью

var checked = $(target).find("input[type='checkbox']:checked").length;

но у меня почему-то не получается.

Исходный код:

<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>

JS:

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');
  }
});

Помогите пожалуйста!

Comments

[Spartak (Web-StyleStudio)]

var checked = $("input.__select__input[type='checkbox']:checked").length;

[zhigunov13]

Spartak (Web-StyleStudio), правильно ли я понял что вы здесь используете jQuery? Можно ли обойтись без него, или это необходимо?

[Spartak (Web-StyleStudio)]

zhigunov13,
Да, это на jquery
На чистом js сами перепишите

Answer 1

[Spartak (Web-StyleStudio)]

var checked = 0;

$(document).ready(function() {
	$("form").on("change", "input.__select__input", function() {
		checked = $("input.__select__input[type='checkbox']:checked").length;
		$(".__select__title").html(checked > 0 ? checked : "Выберите из списка...");
	});
	$(".__select__title").html(checked > 0 ? checked : "Выберите из списка...");
});