HTML元素的值未定义但已设置

Question

我想在页面渲染到后端的匹配状态后设置复选框.

为此目的,我实现了这个功能到目前为止的工作是什么

更新为user-suggestion cbs [i] .dataset.thvalue或cbs [i] .dataset.value无关紧要

 function updateCheckboxes () {

  let activeCheckbox = '<input type="checkbox" onclick="handleClickOnReduce()" checked>'
  let inactiveCheckbox = '<input type="checkbox" onclick="handleClickOnReduce()">'

  let cbs = document.getElementsByTagName('td')
  for (let i = 0; i < cbs.length; i++) {
    if (cbs[i].id === 'reduceCheckbox' || cbs[i].id === 'slCheckbox') {
      if (cbs[i].dataset.thvalue === 'true') {
        cbs[i].innerHTML = activeCheckbox
      }
      else {
        cbs[i].innerHTML = inactiveCheckbox
      }
    }
  }
}

HTML部分,使用Thymeleaf

    <td id="reduceCheckbox" data-th-value="${car.isReduced()}"></td>
    <td id="slCheckbox" data-th-value="${car.isSl()}"></td>

但浏览器通过打印输出值来声明它是未定义的,即使设置的值正如您在浏览器中的实时图片中所看到的那样.

由于文档我的语法应该是正确的？

https://www.w3schools.com/jsref/prop_option_value.asp

有什么建议吗？

泰

Answer 1

您的HTML无效.

<td>元素没有value属性.(您引用的链接正在讨论<option>,而不是<td>).

您的浏览器未将JS value属性映射到您的发明属性.

如果要向元素添加任意数据,请使用data-*属性并使用数据集API读取它.

Answer 2

看起来我对 Thymeleaf 语法​​对 th-data 的误解导致了这个问题。

这是修复：

<td id="reduceCheckbox" th:attr="data-value=${car.isReduced()}"></td>

访问通过

 console.log(cbs[i].dataset.value)