如何在data-id属性中显示选中的复选框

<input type="checkbox" value="1" id="checkbox1">
<label for="checkbox1">选项1</label>
<input type="checkbox" value="2" id="checkbox2">
<label for="checkbox2">选项2</label>
<input type="checkbox" value="3" id="checkbox3">
<label for="checkbox3">选项3</label>

<div id="result"></div>

// 获取所有的复选框元素
const checkboxes = document.querySelectorAll('input[type="checkbox"]');

// 为每个复选框添加事件监听器
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    // 创建一个空数组存储选中的复选框的值
    const selectedValues = [];

    // 遍历所有的复选框
    checkboxes.forEach(checkbox => {
      // 如果复选框被选中，则将其值添加到数组中
      if (checkbox.checked) {
        selectedValues.push(checkbox.value);
      }
    });

    // 将选中的复选框的值赋给data-id属性
    document.getElementById('result').setAttribute('data-id', selectedValues.join(', '));
  });
});