如何在 JavaScript 中使用文本框值保存每个问题的复选框值？答案

【问题标题】：How to save checkbox value for each question with textbox value in JavaScript?如何在 JavaScript 中使用文本框值保存每个问题的复选框值？
【发布时间】：2021-12-28 09:55:51
【问题描述】：

我正在创建一个 HTML 调查问卷并从 API 调用中获取所有数据。我已将数据设置为数组并显示它们。现在我需要将问卷数据保存到数据库中。我对复选框答案有疑问。每个问题都有一个复选框，其值称为“其他”。如果用户单击该复选框，它将显示一个文本框。我需要将这些复选框答案添加到对象数组中。如下所示，

{QType: 'Questionnaire', QuesID: '1', OpId: '1', option: '1'}
{QType: 'Questionnaire', QuesID: '1', OpId: '2', option: '2'}
{QType: 'Questionnaire', QuesID: '2', OpId: '6', option: '6'}
{QType: 'Questionnaire', QuesID: '2', OpId: '7', option: '7'}

如果用户选中另一个选项，文本框的值也会与 idsquestion 连接。

{QType: 'Questionnaire', QuesID: '2', OpId: '8+'this is textbox value'+', option: '8'}

这是我尝试过的；

let Questions = [
    { idsquestion: "1", questionname: "Where do you use internet?" },
    { idsquestion: "2", questionname: "What type of credit card do you have?" },
];
let Ans = [
    { idqoption: "1", idsquestion: "1", qoption: "Home" },
    { idqoption: "2", idsquestion: "1", qoption: "School" },
    { idqoption: "3", idsquestion: "1", qoption: "Office" },
    { idqoption: "4", idsquestion: "1", qoption: "Other" },
    { idqoption: "5", idsquestion: "2", qoption: "VISA" },
    { idqoption: "6", idsquestion: "2", qoption: "Mastercard" },
    { idqoption: "7", idsquestion: "2", qoption: "American Express" },
    { idqoption: "8", idsquestion: "2", qoption: "Other" },
];

function getData() {
    const parent = document.getElementById("questions-container");
    const frag = document.createDocumentFragment();

    for (const questionObj of Questions) {
        const container = document.createElement("div");
        container.className = "question-list";

        const questionElm = document.createElement("p");
        questionElm.textContent = questionObj.questionname;
        questionElm.className = "question-p";

        container.append(questionElm);

        const ansElm = document.createElement("div");
        ansElm.className = "answer-container";
        ansElm.id = questionObj.idsquestion;

        for (const ansObj of Ans) {
            if (questionObj.idsquestion == ansObj.idsquestion) {
                const checkBoxElm = document.createElement("input");
                checkBoxElm.setAttribute("type", "checkbox");
                checkBoxElm.id = ansObj.idquestionoption;
                checkBoxElm.name = ansObj.idsquestion;
                checkBoxElm.className = "check-box-class";
                checkBoxElm.value = ansObj.qoption;
                checkBoxElm.onclick = () => ansQuestions(checkBoxElm);

                const lblCheckBox = document.createElement("label");
                lblCheckBox.textContent = ansObj.qoption;
                lblCheckBox.className = "lbl-class";
                lblCheckBox.htmlFor = ansObj.idquestionoption;
                lblCheckBox.id = "lbl_" + ansObj.idquestionoption;

                ansElm.append(checkBoxElm, lblCheckBox);

                if (ansObj.qoption == "Other") {
                    const txtBoxElm = document.createElement("input");
                    txtBoxElm.setAttribute("type", "text");
                    txtBoxElm.setAttribute("name", "txt_" + ansObj.idsquestion);
                    txtBoxElm.setAttribute("id", "txt_" + ansObj.idsquestion);
                    txtBoxElm.setAttribute("style", "display:none");
                    ansElm.append(txtBoxElm);
                }
                container.append(ansElm);
            }
        }
        frag.append(container);
    }
    parent.append(frag);
}

function ansQuestions(ansObj) {
    var chkBoxVal = $(ansObj).attr("id");
    var chkBoxVal2 = $(ansObj).attr("value");
    var chkBoxVal3 = $(ansObj).attr("name");
    console.log(chkBoxVal3);

    if (chkBoxVal2 == "Other") {
        var text = document.getElementById("txt_" + chkBoxVal3);
        text.style.display = "block";
        console.log(text);
    } else {
        text.style.display = "none";
    }
}
function saveData() {
    var QType = "Questionnaire";
    var Qobj = { QType: QType, QuesID: QuesID, OpId: OpId, option: option };
}

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <title></title>
    </head>
    <body onload="javascript:getData()">
        <div id="Review2">
            <div data-role="content">
                <div id="questions-container"></div>
                <div id="button-container">
                    <button onclick="saveData()">Submit</button>
                </div>
            </div>
        </div>
    </body>
</html>

【问题讨论】：

下次可以使用code snippet。这次我已经帮你做了。
好的，非常感谢。

标签： javascript html jquery

【解决方案1】：

将 var text = document.getElementById("txt_" + chkBoxVal3); 移到 if 之外
循环查找离Other最近的文本
您的标签定义不正确。将复选框包装在标签中更简单
使用事件监听器和委托

let Questions = [
    { idsquestion: "1", questionname: "Where do you use internet?" },
    { idsquestion: "2", questionname: "What type of credit card do you have?" },
];
let Ans = [
    { idqoption: "1", idsquestion: "1", qoption: "Home" },
    { idqoption: "2", idsquestion: "1", qoption: "School" },
    { idqoption: "3", idsquestion: "1", qoption: "Office" },
    { idqoption: "4", idsquestion: "1", qoption: "Other" },
    { idqoption: "5", idsquestion: "2", qoption: "VISA" },
    { idqoption: "6", idsquestion: "2", qoption: "Mastercard" },
    { idqoption: "7", idsquestion: "2", qoption: "American Express" },
    { idqoption: "8", idsquestion: "2", qoption: "Other" },
];

function getData() {
  const parent = document.getElementById("questions-container");
  const frag = document.createDocumentFragment();

  for (const questionObj of Questions) {
    const container = document.createElement("div");
    container.className = "question-list";

    const questionElm = document.createElement("p");
    questionElm.textContent = questionObj.questionname;
    questionElm.className = "question-p";

    container.append(questionElm);

    const ansElm = document.createElement("div");
    ansElm.className = "answer-container";
    ansElm.id = questionObj.idsquestion;

    for (const ansObj of Ans) {
      if (questionObj.idsquestion == ansObj.idsquestion) {
        const checkBoxElm = document.createElement("input");
        checkBoxElm.setAttribute("type", "checkbox");
        checkBoxElm.name = ansObj.idsquestion;
        checkBoxElm.className = "check-box-class";
        checkBoxElm.value = ansObj.qoption;

        const lblCheckBox = document.createElement("label");
        lblCheckBox.textContent = ansObj.qoption;
        lblCheckBox.className = "lbl-class";
        lblCheckBox.append(checkBoxElm)
        ansElm.append(lblCheckBox);

        if (ansObj.qoption == "Other") {
          const txtBoxElm = document.createElement("input");
          txtBoxElm.setAttribute("type", "text");
          txtBoxElm.setAttribute("name", "txt_" + ansObj.idsquestion);
          txtBoxElm.setAttribute("id", "txt_" + ansObj.idsquestion);
          txtBoxElm.hidden=true;
          ansElm.append(txtBoxElm);
        }
        container.append(ansElm);
      }
    }
    frag.append(container);
  }
  parent.append(frag);
}

document.getElementById('questions-container').addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.type === "checkbox") {
    const chkBoxVal = tgt.value;
    const chkBoxName = tgt.name;
    const text = document.getElementById("txt_" + chkBoxName);
    text.hidden = !tgt.checked || chkBoxVal !== "Other";
  }  
})

document.getElementById("subbut").addEventListener("click",function() {
  const answers = [...document.querySelectorAll('[type=checkbox]:checked')].map(chk => {
    let val = chk.value;
    const div = chk.closest("div");
    const id = div.id;
    if (val === "Other") {
      val = div.querySelector("[type=text]").value
    }
    return {
      id: id, name: val
    }
  })
  console.log(answers)
})

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body onload="javascript:getData()">
  <div id="Review2">
    <div data-role="content">
      <div id="questions-container"></div>
      <div id="button-container">
        <button type="button" id="subbut">Submit</button>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

我更新了，你的标签也有错误。我让它变得更简单了。你没有ansObj.idquestionoption
好的。非常感谢先生
我的问题有些问题。你能帮帮我吗？
只有当你告诉我问题是什么
非常感谢先生