如何在JavaScript中使用Thymeleaf生成的ID？

错误原因分析 #

你遇到的java.lang.IndexOutOfBoundsException是Thymeleaf渲染阶段的错误，根源有两个：

1. 循环状态变量st.index或stat.index未正确声明（比如嵌套循环中某一层没指定状态变量），导致Thymeleaf无法获取合法的索引值，触发数组越界。
2. 你直接在JavaScript中使用Thymeleaf的|...|字符串拼接语法，浏览器的JS引擎无法识别该语法，同时document.getElementById的写法错误（错误地将.checked写在字符串参数里）。

可行解决方法 #

方法1：通过单选按钮组的name属性检查（推荐，更简洁） #

单选按钮的核心特性是同一组共用一个name属性，无需针对每个ID单独处理，直接通过name获取整组按钮并检查选中状态即可：

Thymeleaf模板代码（嵌套循环示例）

<!-- 外层循环遍历问题，st为外层循环状态变量 -->
<div th:each="question, st : ${questionList}">
  <p th:text="${question.title}"></p>
  <!-- 内层循环遍历选项，stat为内层循环状态变量 -->
  <div th:each="choice, stat : ${question.choices}">
    <input type="radio" 
           th:name="|question_group_${st.index}|"  <!-- 同一问题的选项共用一个name -->
           th:value="${choice.id}" 
           th:id="|choice_id_${st.index}_${stat.index}|">
    <label th:for="|choice_id_${st.index}_${stat.index}|" th:text="${choice.content}"></label>
  </div>
  <!-- 绑定检查函数，传递外层循环的索引 -->
  <button th:onclick="checkSingleQuestion(${st.index})">确认选择</button>
</div>

JavaScript代码

function checkSingleQuestion(questionIndex) {
  // 通过name获取当前问题的所有单选按钮
  const radioGroup = document.getElementsByName(`question_group_${questionIndex}`);
  let hasChecked = false;

  // 遍历检查是否有选中项
  for (const radio of radioGroup) {
    if (radio.checked) {
      hasChecked = true;
      break;
    }
  }

  if (!hasChecked) {
    alert("请选择该问题的选项");
  }
}

方法2：让Thymeleaf渲染出实际ID后传递给JS #

如果必须通过ID检查单个单选按钮，需确保Thymeleaf先将ID渲染为实际字符串，再传递给JavaScript：

Thymeleaf模板代码

<input type="radio" 
       th:id="|choice_id_${st.index}_${stat.index}|" 
       th:name="|question_group_${st.index}|"
       th:value="${choice.id}">
<button th:onclick="checkRadio('|choice_id_${st.index}_${stat.index}|')">检查该选项</button>

JavaScript代码

function checkRadio(radioId) {
  const radio = document.getElementById(radioId);
  // 检查元素是否存在且已选中
  if (!radio || !radio.checked) {
    alert("请选中该选项");
  }
}

关键注意事项 #

• 确保嵌套循环的状态变量（如st和stat）都在th:each中正确声明，格式为th:each="元素变量, 状态变量 : ${集合}"，缺失状态变量会导致index获取失败。
• 永远不要在JavaScript代码中直接使用Thymeleaf专属语法（如|...|、${}），需让Thymeleaf在页面渲染阶段将这些变量替换为实际字符串后再交给JS执行。

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