Caspio平台9题评估：多按钮点击仅更新首个文本框求助

问题说明 #

用Caspio制作9题评估问卷，每题含5个可点击选项：

• 点击一次选项，生成m1-m5结果
• 再次点击同一选项，生成m1+-m5+结果
  第一题功能正常，但添加其余题目后，所有选项点击均仅更新第一题的文本框。

问题根源 #

1. 原代码全局选中所有.box类元素，点击任何题的选项都会触发第一题的逻辑
2. 输出目标硬编码为第一题的InsertRecordQuestion1，无论点击哪题都往这个框写值
3. 所有题的选项ID重复使用m1-m5，且选中状态清除是全局范围，会干扰其他题的选中状态

修改后的完整代码示例 #

第一题HTML（第二题及后续题以此类推） #

<!-- 给每个题的表格添加data-question属性标记题目编号 -->
<table style="width:100%" data-question="q1">
  <tbody>
    <tr>
      <td>Question 1: Condition and appearance of buildings, internal & external grounds, parking areas and roadways.</td>
      <!-- 选项ID改为「题目编号-选项编号」格式，避免重复冲突 -->
      <td id="q1-m1" class="box">Condition and appearance are poor with no defined standards</td>
      <td id="q1-m2" class="box">Appearance and condition generally average and numerous issues seen on plant tour</td>
      <td id="q1-m3" class="box">Appearance and condition generally good but a number of issues seen on plant tour</td>
      <td id="q1-m4" class="box">Appearance and condition generally very good but some minor issues seen on plant tour</td>
      <td id="q1-m5" class="box">Excellent appearance and condition with no major issues</td>
    </tr>
  </tbody>
</table>

<!-- 第二题示例 -->
<table style="width:100%" data-question="q2">
  <tbody>
    <tr>
      <td>Question 2: [替换为第二题题目内容]</td>
      <td id="q2-m1" class="box">[替换为选项1内容]</td>
      <td id="q2-m2" class="box">[替换为选项2内容]</td>
      <td id="q2-m3" class="box">[替换为选项3内容]</td>
      <td id="q2-m4" class="box">[替换为选项4内容]</td>
      <td id="q2-m5" class="box">[替换为选项5内容]</td>
    </tr>
  </tbody>
</table>

通用JavaScript代码（适配所有题目） #

// 遍历每个独立的题目容器
document.querySelectorAll('[data-question]').forEach(questionContainer => {
  const questionId = questionContainer.dataset.question;
  // 匹配当前题对应的输出文本框（q1对应InsertRecordQuestion1，以此类推）
  const outputField = document.getElementById(`InsertRecordQuestion${questionId.slice(1)}`);
  // 仅选中当前题目内的选项，不干扰其他题
  const boxes = questionContainer.querySelectorAll('.box');

  boxes.forEach(box => {
    box.addEventListener('click', function(e) {
      // 提取选项编号（比如从q1-m1中拿到m1）
      const elementId = e.target.id.split('-')[1];
      
      // 仅清除当前题目内选项的选中/双击状态
      boxes.forEach(b => {
        b.classList.remove('selected', 'double-selected');
      });

      if (this.classList.contains('selected')) {
        // 再次点击：设置双击状态，输出mX+
        this.classList.remove('selected');
        this.classList.add('double-selected');
        outputField.value = `${elementId}+`;
      } else {
        // 第一次点击：设置选中状态，输出mX
        this.classList.add('selected');
        outputField.value = elementId;
      }
    });
  });
});

关键修改点说明 #

• 题目独立分组：用data-question属性给每个题的容器做标记，实现逻辑隔离
• 选项ID唯一：采用qX-mY格式命名选项ID，避免不同题的选项ID冲突
• 局部逻辑处理：JS针对每个题目单独操作，只修改当前题的选项状态和对应输出框
• 状态互不干扰：清除选中状态时仅针对当前题的选项，不会影响其他题的选择

内容的提问来源于stack exchange，提问作者Kevin Sullivan