使用JS从表单输入复选框中获取数据属性

可以通过以下步骤实现：

1. 首先，获取所有复选框元素的引用。可以使用document.querySelectorAll()方法来选择所有的复选框元素，传入相应的选择器，例如input[type="checkbox"]。
2. 创建一个空数组来存储选中的复选框的值。
3. 遍历复选框元素的引用列表，使用forEach()方法或者for...of循环来遍历。
4. 在遍历的过程中，检查每个复选框元素的checked属性是否为true，表示该复选框被选中。
5. 如果复选框被选中，可以通过getAttribute()方法获取复选框的数据属性值。传入相应的数据属性名称作为参数，例如getAttribute("data-属性名")。
6. 将获取到的数据属性值添加到之前创建的数组中。
7. 最后，可以使用获取到的数据属性值进行后续的处理或者发送到服务器。

以下是一个示例代码：

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

// 创建一个空数组来存储选中的复选框的值
const selectedValues = [];

// 遍历复选框元素的引用列表
checkboxes.forEach(checkbox => {
  // 检查复选框是否被选中
  if (checkbox.checked) {
    // 获取复选框的数据属性值
    const dataAttribute = checkbox.getAttribute("data-属性名");
    
    // 将数据属性值添加到数组中
    selectedValues.push(dataAttribute);
  }
});

// 打印选中的复选框的值
console.log(selectedValues);

这样，你就可以通过上述代码从表单输入复选框中获取数据属性，并将选中的复选框的值存储在一个数组中，以供后续处理或发送到服务器使用。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 云开发（Serverless）：https://cloud.tencent.com/product/tcb
• 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 区块链服务（TBC）：https://cloud.tencent.com/product/tbc
• 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
• 腾讯云直播（CSS）：https://cloud.tencent.com/product/css
• 腾讯云音视频（TME）：https://cloud.tencent.com/product/tme