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

Question

[Иван Никифоров]

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

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

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("Выберите что-нибудь!");
    }
};

Comments

[stetxems]

Перебери через цикл все чек боксы document.querySelectorAll

[Иван Никифоров]

В консоли выдаёт "undefined"

Answer 1

[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}`)
}

Comments

[Иван Никифоров]

<form method="GET" action="#" id="form">
    <section class="table_1">
        <table class="iksweb">
            <tbody>
                <tr>
                    <td rowspan="3"><b>Культура<br>обслуживания</b>
                        <h3 class="the">Скорость:</h3>   
                        <section class="conteiner">
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="i6" value="1">
                                <label for="i6" tabindex="12">Выполнять стандарты по времени обслуживания</label>     
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="i7" value="0">
                                <label for="i7" tabindex="13">Время ожидания в очереди 120 секунд</label>     
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="checkbox_68" value="1">
                                <label for="checkbox_68" tabindex="14">Время ожидания в очереди 90 секунд</label>     
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="checkbox_69" value="1">
                                <label for="checkbox_69" tabindex="15">Время обслуживания 90 секунд</label>
                            </div>
                            <div class="checkbox">
                                <input type= "checkbox" class="i-6" id="checkbox_70" value="0">
                                <label for="checkbox_70" tabindex="16">Время обслуживания 120 секунд</label>
                            </div>
                            <div class="checkbox">
                                <input type="checkbox" class="i-6" id="checkbox_71" value="0">
                                <label for="checkbox_71" tabindex="17">Время обслуживания 60 секунд</label>
                            </div>
                            <div class="out-block out-6"></div>
                        </section>
<div class="dsw">
        <button class="b-6" tabindex="11" id="btn-1" type="submit">Отправить</button>
</div>
        
</form>
<script src="./js/script.js"></script>

[wakenby]

Илья Дячук, А теперь расскажите про логику. Ответы с value=1 правильные, с value=0 нет. При клике на кнопку отправить что должно быть? Сообщение о том что ответы вообще не выбраны, и количество правильных ответов?

[Иван Никифоров]

При клике на кнопку "Отправить" форма должна отправляться на почту.
С value, хотел сделать сумму подсчёта результатов и выбирались "Правильные" и "Неправильные" ответы.
Если ничего не выбирать и нажать на кнопку "Отправить", то выводиться сообщение. (Но оно выводится даже, если я выбрал чекбокс).

[Иван Никифоров]

wakenby, теперь в консоли разработчика, не выводится сообщение, что ответ правильный

[wakenby]

Илья Дячук, Все получилось?

[wakenby]

Илья Дячук, Начнем с простого. Нельзя вешать событие на кнопку, ибо эта кнопка находиться в форме, при отправке формы страница будет перезагружаться и код с кнопки не совсем корректно будет отрабатывать. Вы форму точно обрабатываете на сервере?

Если форма на сервере не обрабатывается то лучше повесить событие на форму, и отменять ее дефолтное поведение

[Иван Никифоров]

wakenby,

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

  else {
      (myCheckbox.uncheck);
      console.log('Выберите');
      alert("Выберите что-нибудь!");
  }
};

Ну, ошибок не выдаёт, просто обновляется страница и перекидывает на начало
Код вроде правильно исправил?

[wakenby]

Илья Дячук, Совершенно не правильно)) Обновил ответ с кодом, на основе его можете делать все что угодно. Но судя по поставленной задаче вам ничего и менять не придется

[Иван Никифоров]

wakenby, Спасибо Вам! Сейчас попробовал ваш код и работает, как надо.

[Иван Никифоров]

wakenby, Можете помочь?

Answer 2

[Tim]

не нужно делать проверки на клиенте на правильные ответы. Тем более при каждом клике несколько раз проходиться по одному и тому же массиву ( если прям так нужно именно как выше, то достаточно собрать в объект данные через reduce пройдясь по массиву 1 раз, а не 4). В примере, массив result отправляете на сервер и там проверяете какие ответы верные, а какие нет. Конечно все зависит от задачи