时间戳

首页 > 解决方案 > 如何存储多个复选框的变量以供以后在同一网页上使用？

javascript - 如何存储多个复选框的变量以供以后在同一网页上使用？

问题描述

我们有一份包含几个问题的问卷，其中大部分包含几个复选框/单选按钮供用户选择。当用户浏览问题时，我们拥有它，而不是为每组问题加载一个新网页，而是隐藏当前表单并显示下一个表单。然后它保存给出的答案，并在调查问卷的末尾输出以特定格式给出的所有答案的串联版本（这是故意的）

下面是我们当前的尝试：

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>

我们已经解决了我们的下拉问题，但是我们遇到了这些复选框的问题，我认为当我们处理单选按钮时也会有类似的痛苦？

标签： javascripthtmlforms

解决方案

我设法找到了一个解决方案，但它的外观与我最初尝试的完全不同。

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 = "";   
};

推荐阅读