Блог

У нас есть анкета с несколькими вопросами, большинство из которых состоят из нескольких флажков/переключателей, из которых пользователь может выбрать. Когда пользователь переходит по вопросам, мы делаем так, чтобы вместо загрузки новой веб-страницы для каждого набора вопросов она скрывала текущую форму и открывала следующую форму. Затем он сохраняет данные ответы и в конце анкеты выводит объединенную версию всех ответов, данных в определенном формате (это намеренно так, как есть).

Прямо ниже приведена наша текущая попытка:

 function checkboxQ1()
{
    i = 1;

    while(i < 8)
    {
        var Q1increment = "Q1-" i;
        var Q1evaluate = document.getElementsByName(Q1increment);
        if(Q1evaluate.checked)
        {
            Q1_ticked = Q1_ticked   Q1evaluate;
        }
        i  
        alert(i   ", "   Q1evaluate   ", "   Q1_ticked)
    }

    alert(Q1_ticked)

    everything = everything   ", "   Q1_ticked
    alert(everything);
};
 

Однако, похоже, это не работает, так как во время цикла while он показывает, что переменная Q1evaluate равна: [object NodeList] и я не могу понять, как это исправить.
Ниже приведен соответствующий HTML-код для справки, если это поможет.

 <form>
    <input type="checkbox" id="Q1checkbox" name="Q1" value="Q1-1">
    <label for="Answer1"> Answer Choice 1 </label>
    <br>
    <input type="checkbox" id="Q1checkbox" name="Q1" value="Q1-2">
    <label for="Answer2"> Answer Choice 2 </label>
    <br>
    <input type="checkbox" id="Q1checkbox" name="Q1" value="Q1-3">
    <label for="Answer3"> Answer Choice 3 </label>
</form>
 

У нас это работает для наших выпадающих вопросов, но у нас возникли проблемы с этими флажками, и я предполагаю, что переключатели будут испытывать такую же боль, когда мы до них доберемся?

Мне удалось найти решение, но оно немного отличается по внешнему виду от того, что я изначально пытался сделать.

HTML

 <form>
    <input type="checkbox" id="Q1checkbox1" name="Q1" value="Q1-1">
    <label for="Answer1"> Answer Choice 1 </label>
    <br>
    <input type="checkbox" id="Q1checkbox2" name="Q1" value="Q1-2">
    <label for="Answer2"> Answer Choice 2 </label>
    <br>
    <input type="checkbox" id="Q1checkbox3" name="Q1" value="Q1-3">
    <label for="Answer3"> Answer Choice 3 </label>
</form>
 

язык JavaScript

 function ToQuestion2(){
    i = 1;
    while (i < 4)
    {
        if (document.getElementById('Q1checkbox' i).checked)
        {
            var Q1checked = "Q1-" i;
            everything = everything   ", "   Q1checked;
        }
        i  
    }
    alert(everything);
    document.getElementById("Q1").style.display = "none";
    document.getElementById("Q2").style.display = "";   
};