jsPDF生成PDF：未作答单选问题错误显示A而非Not answered

我编写了一段使用jsPDF生成问答PDF的JavaScript代码，预期未作答的问题在生成的PDF中显示“Not answered”。但对于类似第75题的单选按钮（radio）问题，当未选择任何选项时，PDF中却错误显示为选项A，而非预设的“Not answered”。

相关代码 #

JavaScript代码

function generatePDF() {
  // 创建新的PDF文档
  var doc = new jsPDF();

  // 定义问题数组
  var questions = [
    "Question 1", "Question 2", "Question 3", "Question 4", "Question 5",
    "Question 6", "Question 7", "Question 8", "Question 9", "Question 10",
    "Question 11", "Question 12", "Question 13", "Question 14", "Question 15",
    "Question 16", "Question 17", "Question 18", "Question 19", "Question 20",
    "Question 21", "Question 22", "Question 23", "Question 24", "Question 25",
    "Question 26", "Question 27", "Question 28", "Question 29", "Question 30",
    "Question 31", "Question 32", "Question 33", "Question 34", "Question 35",
    "Question 36", "Question 37", "Question 38", "Question 39", "Question 40",
    "Question 41", "Question 42", "Question 43", "Question 44", "Question 45",
    "Question 46", "Question 47", "Question 48", "Question 49", "Question 50",
    "Question 51", "Question 52", "Question 53", "Question 54", "Question 55",
    "Question 56", "Question 57", "Question 58", "Question 59", "Question 60",
    "Question 61", "Question 62", "Question 63", "Question 64", "Question 65",
    "Question 66", "Question 67", "Question 68", "Question 69", "Question 70",
    "Question 71", "Question 72", "Question 73", "Question 74", "Question 75",
    "Question 76", "Question 77", "Question 78", "Question 79", "Question 80",
    "Question 81", "Question 82", "Question 83", "Question 84", "Question 85",
    "Question 86", "Question 87", "Question 88", "Question 89", "Question 90"
  ];

  for (var i = 0; i < questions.length; i++) {
    // 检查当前问题是否有选中的单选按钮
    var radioButton = document.querySelector(`input[name="${i + 1}"]:checked`);
    if (radioButton) {
      var answer = radioButton.value;
    } else {
      // 检查当前问题是否有文本输入框
      var inputField = document.querySelector(`input[name="${i + 1}"]`);
      if (inputField) {
        var answer = inputField.value;
      } else {
        var answer = "Not answered";
      }
    }

    // 将文本放入单元格
    doc.cell(20, 20 + i * 10, 100, 10, questions[i], i);
    doc.cell(50, 20 + i * 10, 100, 10, "Answer: " + answer, i);
  }

  // 保存PDF
  doc.save("Question and answers.pdf");
}

HTML代码（第75题示例）

<div id="question75" class="question" style="display:none;">
    <p>Question 75</p>
    <div id="answers" class="answers">
      <label>
        <input type="radio" name="75" value="A">
        a
      </label>
      <label>
        <input type="radio" name="75" value="B">
        b
      </label>
      <label>
        <input type="radio" name="75" value="C">
        c
      </label>
      <label>
        <input type="radio" name="75" value="D">
        d
      </label>
    </div>
</div>

问题原因 #

当单选按钮未被选中时，代码进入else分支，执行document.querySelector(input[name="${i + 1}"])会找到该name下的第一个单选按钮（也就是value为A的那个），然后取它的value赋值给answer，导致PDF错误显示选项A，而非“Not answered”。

解决方案 #

修改else分支中查找文本输入框的代码，明确指定查找type="text"的输入框，避免匹配到单选按钮：

// 原代码
// var inputField = document.querySelector(`input[name="${i + 1}"]`);

// 修改后的代码
var inputField = document.querySelector(`input[name="${i + 1}"][type="text"]`);

修改后的完整JavaScript函数：

function generatePDF() {
  var doc = new jsPDF();

  var questions = [
    // 问题数组保持不变
    "Question 75",
    // ...其他问题
  ];

  for (var i = 0; i < questions.length; i++) {
    var radioButton = document.querySelector(`input[name="${i + 1}"]:checked`);
    var answer;
    if (radioButton) {
      answer = radioButton.value;
    } else {
      // 仅查找文本类型的输入框
      var inputField = document.querySelector(`input[name="${i + 1}"][type="text"]`);
      if (inputField && inputField.value.trim() !== "") {
        answer = inputField.value;
      } else {
        answer = "Not answered";
      }
    }

    doc.cell(20, 20 + i * 10, 100, 10, questions[i], i);
    doc.cell(50, 20 + i * 10, 100, 10, "Answer: " + answer, i);
  }

  doc.save("Question and answers.pdf");
}

额外优化：给文本输入框的判断加上value.trim() !== ""，避免空文本输入也被当作有效回答，确保未填写的文本框也显示“Not answered”。

内容的提问来源于stack exchange，提问作者Mohammad Riyaz