如何在JavaScript中获取HTML多维数组输入的键值信息？

架构老林

2026-7-26

获取表单多维数组的键值对信息

问题场景

现有如下HTML输入控件：

<input name="accessoires[123][]" min="0" max="99" type="number" value="0">

<input name="accessoires[456][]" min="0" max="99" type="number" value="0">

<input name="accessoires[789][]" min="0" max="99" type="number" value="0">

目前使用以下代码只能获取输入框的value值，无法提取name属性中的ID（如123、456）：

var accessoires = $("input[name*='accessoires']")
        .map(function(){return $(this).val();}).get();

解决方案

可以通过正则表达式匹配name属性中的ID部分，同时结合value值构建完整的键值信息，有两种常见的结构可选：

1. 返回包含ID和value的对象数组

var accessoires = $("input[name*='accessoires']").map(function() {
    // 匹配name中的数字ID
    var idMatch = this.name.match(/accessoires\[(\d+)\]\[\]/);
    if (idMatch) {
        return {
            accessoiresItemId: idMatch[1],
            value: $(this).val()
        };
    }
}).get();

// 输出示例：
// [
//   { accessoiresItemId: "123", value: "0" },
//   { accessoiresItemId: "456", value: "0" },
//   { accessoiresItemId: "789", value: "0" }
// ]

2. 返回以ID为键、value为值的对象

如果需要更直接的键值映射，可以用each遍历构建对象：

var accessoiresObj = {};
$("input[name*='accessoires']").each(function() {
    var idMatch = this.name.match(/accessoires\[(\d+)\]\[\]/);
    if (idMatch) {
        accessoiresObj[idMatch[1]] = $(this).val();
    }
});

// 输出示例：
// { "123": "0", "456": "0", "789": "0" }