Как в js применить несколько действий к одному заданному стилю?

Делаю тест с чекбоксами и вот такая проблема.
Первый чекбокс работает как надо.
Выбираю второй и он делает вид, что его не выбрали и просит его выбрать. (хотя класс указал общий).
Если выбираю несколько чекбоксов, начиная с первого, то все они окажутся правильными (потому что начал с первого)

Не ругайтесь сильно на код)

document.querySelector('#btn-1').onclick = () => {
    console.log(document.querySelector(".i-6").value);
    let myCheckbox = document.querySelector(".i-6");
    console.log(myCheckbox.checked);
    if  (myCheckbox.checked)  {
        console.log('Правильно');
    }

    else {
        (myCheckbox.uncheck);
        console.log('Выберите');
        alert("Выберите что-нибудь!");
    }
};
  • Вопрос задан
  • 164 просмотра
Решения вопроса 2
@wakenby
Нельзя таким способом обработать все чекбоксы, document.querySelector - находит самый первый dom элемент.

При клике на кнопку или при отправке формы, находите все чекбоксы и уже работайте с ними, а найти их можно с помощью document.querySelectorAll

Вот пример реализации:

const form = document.querySelector('#form')
form.addEventListener('submit', onSubmit)

function onSubmit (event) {
  event.preventDefault()

  let listCheckbox = document.querySelectorAll('.i-6')
  listCheckbox = [...listCheckbox]

  // Проверяем выбран ли хотябы один ответ
  if (!listCheckbox.filter(checkbox => checkbox.checked)) {
    return console.log('Вы не выбрали ни одного ответа')
  }

  // Узнаем сколько всего правильных ответов
  const rightAnswersCount = listCheckbox.filter(checkbox => Number(checkbox.value) === 1).length

  // Узнаем сколько всего не правильных ответов
  const wrongAnswerCount = listCheckbox.length - rightAnswersCount

  // Узнаем количество правильных ответов
  const rightAnswers = listCheckbox.filter(checkbox => Number(checkbox.value) === 1 && checkbox.checked).length

  // Узнаем количество не правильных ответов
  const wrongAnswer = listCheckbox.filter(checkbox => Number(checkbox.value) === 0 && checkbox.checked).length

  // Уведомляем пользователя
  console.log(`Вы ответили правильно на ${rightAnswers} из ${rightAnswersCount}`)
  console.log(`Вы ответили не правильно на ${wrongAnswer} из ${wrongAnswerCount}`)
}
Ответ написан
Tim-A-2020
@Tim-A-2020 Куратор тега JavaScript
не нужно делать проверки на клиенте на правильные ответы. Тем более при каждом клике несколько раз проходиться по одному и тому же массиву ( если прям так нужно именно как выше, то достаточно собрать в объект данные через reduce пройдясь по массиву 1 раз, а не 4). В примере, массив result отправляете на сервер и там проверяете какие ответы верные, а какие нет. Конечно все зависит от задачи
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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