Как сделать проверку на выбран ли один из checkbox?

Question

[xanzik312]

Доброго времени суток.

HTML структура checkbox:

<div class="quiz__checkbox__body checkbox-2">

    <label>
        <input type="checkbox" name="checkbox-2-1" value="социальные сети">
        <span class="wpcf7-list-item-label">социальные сети</span>
    </label>

</div>

У меня таких в одном врапере (.quiz__checkbox__wrapper) несколько, и нужно сделать проверку если хотя бы один из был заполнен.
При нажатии на checkbox для label добавляется class="checked".

(старая функция под дефолтный checkbox который не внутри самого label)

function check_radio_selected(elem_id, error_message) {
	obj = $('input[name="' + elem_id + '"]:checked');
	if (!(obj.length && obj.val()))	{
		alert(error_message);
		return false;
	}
	return true;
}

Так как я использую готовый скрипт квиза там была проверка, но мне нужно чтобы
проверка искала класс (.checkbox-2) и в нем если хотя бы один элемент был с класом label.checked пропускало дальше.

Answer 1

[Айнур Ярулин]

Codepen: Тутъ, немного измените под себя

<label>
  <input type="checkbox">
</label>
<label>
  <input type="checkbox">
</label>
<label>
  <input type="checkbox">
</label>
<button disabled>Кнопка</button>

const inputs = [...document.querySelectorAll('input')]
const button = document.querySelector('button')

const onInput = () => {
  if(document.querySelector('label.checked')) {
    button.disabled = false
  } else {
    button.disabled = true
  }
}

inputs.forEach(input => input.addEventListener('input', function(event) {
  if (event.target.checked) {
    event.target.closest('label').classList.add('checked')
  } else {
    event.target.closest('label').classList.remove('checked')
  }
  onInput()
}))