Question

我正在寻找创建一个非常简单的HTML页面，其中包含带有一系列复选框和输入字段的HTML表单。该页面大致如此：

Input Forename ==== Input Surname ==== Input ID =====
Text checkbox1 value1 Text
Text checkbox2 value2 Text
Text checkbox3 value3 Text
Text checkbox4 value4 Text
Output Text value
Output Text value
Output Text value
Output Text value

根据勾选的值（即值1/2/3/4），然后计算其旁边的值（为了参数，假设它乘以2）然后输出到下面（其中显示“输出”）文字“价值”。抱歉，如果这与“问题”不符，但你通过“收集”数据（即复选框旁边的值）看到我的意思。

我的问题是，是否可以使用JavaScript来说，如果选中tickbox1，请使用“value1”？一旦完成这一切，页面只需要一个“打印”按钮（这很好）。没有需要发生的后端内容，也没有数据捕获。

希望这有意义，并提前感谢

编辑：当然如果使用像JQuery这样的东西要容易得多，我很乐意探索这个！

Answer 1

此代码可以帮助您！

问题[]是一个包含所有输入字段的数组， getElementsByName遍历具有相同名称的所有元素（例如，所有具有相同名称的单选框），然后找出检查了哪一个，然后使用该值。

Answers []是存储值为。

的数组

for (var i = 0; i < questions.length; i++) {

    //Does the question name have more than one instance? (That would make it a checkbox or radio button...
    if (document.getElementsByName(questions[i]).length > 1) {
        //Lets loop through all these values and find out which one is selected, and then grab the value from it.
        var x = document.getElementsByName(questions[i])
            for(var k=0;k<x.length;k++)
            if(x[k].checked){ //This is where it loops to find the checked answer
                    answers[i] = x[k].value;
            //alert("radio saved " + answers[i]);
            }
    }
    //Nope, only once, so its a text field or similar
    else {
        answers[i] = document.getElementById("answer" + questions[i]).value;
        //alert("text saved " + answers[i]);
    }
}

希望这有帮助！

所以要在你的计算中使用它（比如让它加倍）你可以调用

var answertoyourquestion = answers[i] + answers[i];

Answer 2

嗯，你可以尝试这样的事情（未经测试）：

var total = 0;    
for (int i = 0;i < 10;i++)
       {
           var checkbox = document.getElementById("checkbox" + String.ValueOf(i));
           if (checkbox.checked)
              {
                  var valuebox = document.getElementById("value" + String.ValueOf(i));
                  total += (valuebox.value * 2);
              }
       }

是否可以在HTML中的已选中或未选中的复选框中收集数据？

2 个答案: