Как, при выборе checkbox и нажатия кнопки «отправить» подсвечивались ответы?

Question

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

Доброе утро! У меня возникли некоторые сложности.
В js уже прописан код на изменение цветов и заданы стили, но когда нажимаешь на кнопку "отправить", то показывают правильные и неправильные ответы, даже когда ничего не выбирал (Некорректная логика в общем). Нужно сделать так, чтобы показывались ответы, которые выбрали. Может как-то можно поправить код в js?

В js я не особо разбираюсь.

let listCheckbox = document.querySelectorAll('.i-6');
let button = document.getElementById('btn-1');
button.addEventListener('click', function (e) {
for(i=0; i<listCheckbox.length; i++){
let chekcbox = listCheckbox[i].closest('div');
      if((listCheckbox[i].checked == true && listCheckbox[i].value == 1) || (listCheckbox[i].checked == false && listCheckbox[i].value == 0)) {
					chekcbox.classList.add("right");
          chekcbox.classList.remove("false");
      }
      else{
					chekcbox.classList.add("false");
          chekcbox.classList.remove("right");
      }
}
});

<form method="POST" 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>
                  </td>
                </tr>
            </tbody>
        </table>
    </section>
 <div class="dsw">
        <button class="b-6" tabindex="11" id="btn-1" type="submit">Отправить</button>
    </div>  
</form>

.right {
    background-color: #FF3300;
    border-radius: 50px;
 }
.false {
    background-color: #33CC00;
    border-radius: 50px;
 }

Answer 1

[Andrew]

Вот рабочий JS код. Еще замечу, что класс .right красит элемент в красный, a .false в зеленый, что выглядит не совсем логичным

let listCheckbox = document.querySelectorAll('.i-6');
let button = document.getElementById('btn-1');
button.addEventListener('click', function (e) {
for(i=0; i<listCheckbox.length; i++){
let chekcbox = listCheckbox[i].closest('div');
      if (listCheckbox[i].checked === true && listCheckbox[i].value == 1) {
          chekcbox.classList.add("right");
          chekcbox.classList.remove("false");
      } else if (listCheckbox[i].checked === true && listCheckbox[i].value == 0) {
          chekcbox.classList.add("false");
          chekcbox.classList.remove("right");
      }
}
});

Comments

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

@ f3d0t, а как нужно, чтобы было логично?

[Andrew]

Илья Дячук, думаю логично будет наоборот, что класс .right будет давать элементу зеленый фон, a .false - красный

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

Andrew Хорошо, спасибо Вам за помощь!