如何使用D3获取Bootstrap表格中被勾选复选框的ID并存入数组？

你的问题核心在于代码只执行了一次，没有监听复选框的状态变化——原来的代码会在页面加载时获取当时已勾选的复选框，但之后你手动勾选/取消勾选的操作不会触发代码更新数组。下面是用D3实现需求的最优方法：

核心思路 #

给所有目标复选框绑定change事件，实时响应勾选状态的变化，同时维护一个数组来动态添加/移除选中的ID，确保数组始终和当前勾选状态一致。

完整代码实现 #

// 初始化存储选中ID的数组
let checkedIds = [];

// 给所有.jmolInline复选框绑定change事件
d3.selectAll("input.jmolInline")
  .on("change", function() {
    const currentId = this.id;
    if (this.checked) {
      // 避免重复添加相同ID
      if (!checkedIds.includes(currentId)) {
        checkedIds.push(currentId);
      }
    } else {
      // 取消勾选时移除对应ID
      checkedIds = checkedIds.filter(id => id !== currentId);
    }
    // 这里可以根据需求做后续处理，比如打印数组
    console.log("当前选中的ID:", checkedIds);
  });

// 可选：页面加载时初始化已勾选的复选框ID（如果有默认勾选的情况）
d3.selectAll("input.jmolInline:checked")
  .each(function() {
    if (!checkedIds.includes(this.id)) {
      checkedIds.push(this.id);
    }
  });
console.log("初始选中的ID:", checkedIds);

为什么你的原代码不生效？ #

你原来的代码是一次性执行的：页面加载时会获取当时的勾选状态，但之后用户操作复选框的变化不会触发这段代码重新执行，所以数组不会更新。通过绑定change事件，我们能在每次复选框状态改变时自动更新数组，这才是符合交互需求的实现方式。

额外说明 #

• 使用filter方法移除取消勾选的ID，能保证数组里不会残留无效值；
• 加入includes判断是为了避免重复添加同一个ID（比如多次点击同一个复选框的勾选状态时不会重复push）；
• 如果不需要处理页面初始化时的默认勾选，可以去掉后面的初始化代码块。

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