Office JS插件：如何捕获表格内多选复选框的选中值

关于复选框ID的合理性问题 #

所有复选框设置相同ID完全不合理。HTML规范明确要求页面内元素ID必须唯一，相同ID会导致以下问题：

• document.getElementById()只能返回第一个匹配的复选框，后续复选框无法通过ID正常获取
• 会干扰依赖ID的DOM操作或第三方库逻辑，引发难以排查的隐性bug

替代方案 #

• 给每个复选框设置唯一ID：结合数据索引生成，比如checkbox-${index}
• 给所有复选框设置统一class：比如item-checkbox，通过类选择器批量操作元素

多选复选框值捕获实现代码 #

假设API返回的JSON结构为{ data: ["V1", "V2", "V3"] }，以下是完整实现逻辑：

// 等待Office环境初始化完成
await Office.onReady();

// 模拟调用API获取数据（替换为你的实际接口调用逻辑）
async function fetchData() {
  // 实际场景可替换为Office JS相关API或自定义接口请求
  const mockResponse = { data: ["V1", "V2", "V3", "V4"] };
  return mockResponse.data;
}

// 动态生成带复选框的表格
async function renderTable() {
  const data = await fetchData();
  const tableBody = document.getElementById('table-body'); // 页面中预先定义的表格tbody元素

  data.forEach((item, index) => {
    const row = document.createElement('tr');

    // 创建复选框单元格
    const checkboxCell = document.createElement('td');
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.className = 'item-checkbox'; // 统一类名用于批量选择
    checkbox.id = `checkbox-${index}`; // 唯一ID
    checkbox.value = item; // 将对应值存入复选框的value属性

    checkboxCell.appendChild(checkbox);

    // 创建内容单元格
    const contentCell = document.createElement('td');
    contentCell.textContent = item;

    row.appendChild(checkboxCell);
    row.appendChild(contentCell);
    tableBody.appendChild(row);
  });
}

// 捕获选中项并输出的函数
function getSelectedItems() {
  // 获取所有选中的复选框
  const checkedBoxes = document.querySelectorAll('.item-checkbox:checked');
  // 提取选中项的value值
  const selectedValues = Array.from(checkedBoxes).map(box => box.value);

  // 输出选中值（替换为你的业务逻辑，比如写入Office文档）
  console.log('选中项：', selectedValues);
  // 示例：Word插件中写入选中内容到文档
  // await Word.run(async (context) => {
  //   context.document.body.insertParagraph(`选中项：${selectedValues.join(', ')}`, Word.InsertLocation.end);
  //   await context.sync();
  // });
}

// 绑定按钮点击事件
document.getElementById('submit-btn').addEventListener('click', getSelectedItems);

// 页面加载时渲染表格
renderTable();

核心逻辑说明 #

1. 动态生成表格时，将数据项存入复选框的value属性（或data-value自定义属性）
2. 点击按钮时，通过类选择器筛选出所有选中的复选框，提取对应值即可

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