可以通过以下步骤实现:
document.querySelectorAll()
方法来选择所有的复选框元素,传入相应的选择器,例如input[type="checkbox"]
。forEach()
方法或者for...of
循环来遍历。checked
属性是否为true
,表示该复选框被选中。getAttribute()
方法获取复选框的数据属性值。传入相应的数据属性名称作为参数,例如getAttribute("data-属性名")
。以下是一个示例代码:
// 获取所有复选框元素的引用
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);
这样,你就可以通过上述代码从表单输入复选框中获取数据属性,并将选中的复选框的值存储在一个数组中,以供后续处理或发送到服务器使用。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云