3

По задумке функция должна выводить значения только выбранных чекбоксов, но почему-то выводит все.

Почему и как исправить?

На codepen.

let checkBox1 = document.querySelector('#checkBox1');
let checkBox2 = document.querySelector('#checkBox2');
let checkBox3 = document.querySelector('#checkBox3');
let form4 = document.querySelector('#form4');
let checkboxes = document.querySelectorAll('.checkboxes');

checkBox1.addEventListener('click', function(){
    if(checkBox2.checked = true){
        checkBox2.checked = false;
    }
});
checkBox2.addEventListener('click', function(){
    if(checkBox1.checked = true){
        checkBox1.checked = false;
    }
});

form4.onchange = function(){
    for(let i = 0; i < checkboxes.length; i++){
        if(checkboxes[i].cheked = true){
        let checkboxVal = checkboxes[i].value;
            alert(checkboxVal);
        }
    }
};
<form  id="form4" class="configurator-form-1" autocomplete="off">
  <input value="Заказать гидрофикацию" class="checkboxes" type="checkbox" id="checkBox1"> <label class="configurator-checkbox-label" for="label">Заказать гидрофикацию</label>
  <input value="Гидрофикация не требуется" class="checkboxes" type="checkbox" id="checkBox2" > <label class="configurator-checkbox-label" for="label1">Гидрофикация не требуется</label>
  <input value="Требуется дополнительный опциональный комплект"  class="checkboxes" type="checkbox" id="checkBox3"> <label class="configurator-checkbox-label" for="label2">Требуется дополнительный опциональный комплект</label>
</form>

2 ответа 2

4
  1. У Вас ошибка в checked
  2. Проверка равенства производится через ==

    let checkBox1 = document.querySelector('#checkBox1');
    let checkBox2 = document.querySelector('#checkBox2');
    let checkBox3 = document.querySelector('#checkBox3');
    let form4 = document.querySelector('#form4');
    let checkboxes = document.querySelectorAll('.checkboxes');

    checkBox1.addEventListener('click', function(){
        if(checkBox2.checked = true){
            checkBox2.checked = false;
        }
    });
    checkBox2.addEventListener('click', function(){
        if(checkBox1.checked = true){
            checkBox1.checked = false;
        }
    });

    form4.onchange = function(){
        for(let i = 0; i < checkboxes.length; i++){
            if(checkboxes[i].checked == true){
                let checkboxVal = checkboxes[i].value;
                alert(checkboxVal);
            }
        }
    };
<form  id="form4" class="configurator-form-1" autocomplete="off">
  <input value="Заказать гидрофикацию" class="checkboxes" type="checkbox" id="checkBox1"> <label class="configurator-checkbox-label" for="label">Заказать гидрофикацию</label>
  <input value="Гидрофикация не требуется" class="checkboxes" type="checkbox" id="checkBox2" > <label class="configurator-checkbox-label" for="label1">Гидрофикация не требуется</label>
  <input value="Требуется дополнительный опциональный комплект"  class="checkboxes" type="checkbox" id="checkBox3"> <label class="configurator-checkbox-label" for="label2">Требуется дополнительный опциональный комплект</label>
</form>

2
  • 1
    @Dio Такое бывает ) Выберите лучше ответ Igor, как верный.
    – Denis640Kb
    4 мар 2020 в 12:13
  • В любом случае и вам спасибо)
    – Dio
    4 мар 2020 в 12:29
3

Две опечатки.

if (checkboxes[i].checked == true) {
1
  • Эх, опять я не успел ) Вы молодец, Igor.
    – Denis640Kb
    4 мар 2020 в 12:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.