Question

我要在页面的渲染图设为后端的匹配状态后设置复选框。

我为此目的实现了此功能

已更新为用户建议不管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
      }
    }
  }
}

使用Thymeleaf的HTML部分

    <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

有什么建议吗？

Ty

Answer 1

您的HTML无效。

<td>元素没有value属性。（您引用的链接是在谈论<option>，而不是<td>）。

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

如果要向元素添加任意数据，请使用data-* attribute并使用dataset API进行读取。

Answer 2

看起来我对Thymeleaf语法的误解导致了该问题。

这是解决方法：

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

通过

访问

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

Answer 3

值不是 td 标记中的有效属性。您可以使用 abbr 属性

<td id="reduceCheckbox" abbr="true"> <input type="checkbox" onclick="handleClickOnReduce()"> </td>

那么你就可以得到

console.log(cbs[i].abbr)

注意：HTML5不支持abbr属性。

对于 HTML5 ，您可以使用标题属性

<td id="reduceCheckbox" headers="true">
    <input type="checkbox" onclick="handleClickOnReduce()">
</td>

那么你就可以得到

console.log(cbs[i].headers)

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

3 个答案: