@zhigunov13

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

Задача: сделать так, чтобы в "__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');
  }
});

Помогите пожалуйста!
  • Вопрос задан
  • 84 просмотра
Пригласить эксперта
Ответы на вопрос 1
Spartak-2205
@Spartak-2205
Разработка и создание сайтов
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 : "Выберите из списка...");
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы