Проверка количества выбранных чекбоксов

Question

Нужно провести валидацию чекбокса, чтобы пользователь мог выбрать не больше трех пунктов. Если выберает больше трех пунктов, то надо вывести сообщение: «выберите не больше трех».

const numberOfSelectedPreferences = () => {

  let count = 0;
  for (let i = 0; i < checkboxes.children.length; i++) {
    if (checkboxes.children[i].children[0].checked) {
      if (i < 3) {
        console.log("Правильно");
      } else {
        alert("Больше трех пунктов выбрать нельзя, выберите не больше трех");

      }
      count += 1

    }
  }
}

<h1 id="pageh1" name="ph1">Каким увлечением вы увлекаетесь?</h1>
<div class="hobby">
  <form id="frm2" name="ffirs">
    <p><input type="checkbox" id="hobby" name="sport">Sport</p>
    <p><input type="checkbox" id="hobby" name="school">Учеба.</p>
    <p><input type="checkbox" id="hobby" name="reading">Чтение.</p>
    <p><input type="checkbox" id="hobby" name="music">Музыка.</p>
    <p><input type="checkbox" id="hobby" name="dance">Танцы.</p>
    <p><input type="checkbox" id="hobby" name="drawing">Рисование.</p>
    <p><input type="checkbox" id="hobby" name="yoga">Йога.</p>

  </form>
</div>
<button onclick="numberOfSelectedPreferences()">Отправить данные</button>

Answer 1

<html>

</form>

        <h1 id="pageh1" name="ph1">Каким увлечением вы увлекаетесь?</h1>
        <div class="hobby">
            <form id="frm2" name="ffirs">
                <p><input type="checkbox" id="hobby" name="sport" >Sport</p>
                <p><input type="checkbox" id="hobby" name="school" >Учеба.</p>
                <p><input type="checkbox" id="hobby" name="reading" >Чтение.</p>
                <p><input type="checkbox" id="hobby" name="music" >Музыка.</p>
                <p><input type="checkbox" id="hobby" name="dance" >Танцы.</p>
                <p><input type="checkbox" id="hobby" name="drawing" >Рисование.</p>
                <p><input type="checkbox" id="hobby" name="yoga" >Йога.</p>
                
            </form>
        </div>
            <button onclick="numberOfSelectedPreferences()">Отправить данные</button>
<script>
const numberOfSelectedPreferences = () => {
   if(document.querySelectorAll('#frm2 input:checked').length <= 3) console.log("Правильно");
   else alert("Больше трех пунктов выбрать нельзя, выберите не больше трех");
}
</script>
</html>

Answer 2

Как-то так..

const numberOfSelectedPreferences = () => {

    const checkboxes = frm2.querySelectorAll('input');
    let count = 0;
    checkboxes.forEach(c => c.checked ? count++ : 0);

    if (count < 4) {
      console.log("Правильно");
    } else {
      alert("Больше трех пунктов выбрать нельзя, выберите не больше трех");

    }
}

</form>

<h1 id="pageh1" name="ph1">Каким увлечением вы увлекаетесь?</h1>
<div class="hobby">
  <form id="frm2" name="ffirs">
    <p><input type="checkbox" id="hobby" name="sport">Sport</p>
    <p><input type="checkbox" id="hobby" name="school">Учеба.</p>
    <p><input type="checkbox" id="hobby" name="reading">Чтение.</p>
    <p><input type="checkbox" id="hobby" name="music">Музыка.</p>
    <p><input type="checkbox" id="hobby" name="dance">Танцы.</p>
    <p><input type="checkbox" id="hobby" name="drawing">Рисование.</p>
    <p><input type="checkbox" id="hobby" name="yoga">Йога.</p>

  </form>
</div>
<button onclick="numberOfSelectedPreferences()">Отправить данные</button>

БЛОГ НА HUSL

Проверка количества выбранных чекбоксов

Ответы (2 шт):