如何在D3树复选框的点击事件中判断其是否处于勾选状态？

核心实现逻辑 #

D3为元素绑定的原生事件回调中，可直接获取当前触发事件的checkbox DOM节点，读取其内置的checked属性即可得到实时勾选状态，完全不需要额外写DOM选择器去查找对应元素。

基础代码改造 #

直接在原有点击回调中，通过回调上下文的元素引用读取勾选状态即可，适配你现有代码的改造写法如下：

nodeEnter.append('foreignObject').attr('width', '20')
  .attr("x", 200 / 2)
  .attr("y", 1)
  .attr('height', '20').append('xhtml:input')
  .attr('type', 'checkbox')
  .on("click", function(d) {
    // this 指向当前被点击的checkbox原生input元素
    const checkState = this.checked
    console.log('绑定的节点数据：', d)
    console.log('当前复选框勾选状态：', checkState)
  });

版本适配注意事项 #

• 若使用D3 v6及以上版本，事件回调的参数顺序已调整：第一个参数为原生事件对象，第二个参数才是绑定的节点数据d，此时可以通过事件对象的currentTarget属性读取勾选状态，兼容性更强，写法为：

  nodeEnter.append('foreignObject').attr('width', '20')
    .attr("x", 200 / 2)
    .attr("y", 1)
    .attr('height', '20').append('xhtml:input')
    .attr('type', 'checkbox')
    .on("click", function(event, d) {
      const checkState = event.currentTarget.checked
      console.log('绑定的节点数据：', d)
      console.log('当前复选框勾选状态：', checkState)
    });
  

• 注意不要在该事件回调中使用ES6箭头函数替代传统函数写法，箭头函数没有自身的this绑定，会继承外层作用域的上下文，无法正确指向当前checkbox元素，导致读取不到勾选状态。

状态持久化优化 #

树结构重绘时很容易丢失复选框的临时交互状态，可在获取勾选状态后直接将其写入绑定的节点数据中，后续渲染时同步到复选框的初始属性，避免状态丢失：

// 点击事件回调内写入状态到节点数据
.on("click", function(d) {
  const checkState = this.checked
  d.isChecked = checkState
})

// 重绘节点时同步复选框的选中状态，注意布尔属性需要用property设置，不能用attr
d3.selectAll('input[type="checkbox"]')
  .property('checked', d => d.isChecked || false)

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