如何在Thymeleaf的th:onclick中获取checkbox的当前状态

问题原因 #

参数undefined问题主要来自两个常见错误：

• Thymeleaf中手动拼接th:onclick的JS表达式容易出现转义错误，如果${user.id}为字符串类型时没有包裹引号，会直接触发JS语法错误，导致参数传递失败
• 不规范的拼接写法可能导致this指向错误，没有正确绑定当前点击的checkbox元素

修复代码 #

第一步：修改input标签的th:onclick写法 #

推荐使用Thymeleaf的字面量替换语法（用`包裹表达式），无需手动处理复杂的字符串拼接和转义：

<!-- 如果user.id是数字类型 -->
<input type="checkbox" th:onclick="|userSettings(${user.id}, this)|" th:checked="${user.enabled}" />

<!-- 如果user.id是字符串类型，需要额外给参数加单引号 -->
<input type="checkbox" th:onclick="|userSettings('${user.id}', this)|" th:checked="${user.enabled}" />

第二步：调整JS函数获取选中状态 #

你传递的userChk是当前checkbox的DOM对象，需要通过.checked属性获取选中状态：

function userSettings(userId, userChk) {
  // 输出是否选中的布尔值
  alert(userChk.checked)
  // 也可以获取其他DOM属性，比如value
  console.log(userChk.value)
}

可选兼容写法 #

如果你的Thymeleaf版本较低不支持字面量替换，可以用以下拼接写法，注意转义单引号：

<!-- 数字ID -->
<input type="checkbox" th:onclick="'javascript:userSettings(' + ${user.id} + ', this);'" th:checked="${user.enabled}" />

<!-- 字符串ID -->
<input type="checkbox" th:onclick="'javascript:userSettings(\'' + ${user.id} + '\', this);'" th:checked="${user.enabled}" />

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