JavaScript如何获取多选下拉表单各选中项对应的输入数量

现有代码的核心问题 #

• 所有复选框复用相同的id="market"，违反HTML规范，易导致DOM选择逻辑异常
• 所有<label>标签的for="stock"属性指向不存在的id，导致点击文本时无法关联对应复选框，交互逻辑失效
• 所有表单控件未配置合法的name属性，浏览器原生提交时不会将这些控件的值纳入提交数据
• 未选中状态的复选框天然不会被表单提交，若简单用平行数组存储选项和数量，会因数组顺序错位导致数量和选项匹配错误

具体实现步骤 #

1. 修正Blade循环内的元素绑定逻辑 #

给每个选项块的两个输入框绑定带唯一关联键的name属性，从根源上避免匹配错位，同时修正label的关联逻辑：

<div class="list">
    {{-- 复选框以选项的唯一标识为数组键值，提交时仅已勾选的选项会出现在数组中 --}}
    <input 
        type="checkbox" 
        name="markets[{{ $state['id'] }}]" 
        class="list" 
        value="{{ $state['state'] }}"
    />
    {{-- 移除错误的for属性，label会默认关联同容器内的输入框 --}}
    <label class="list">{{ $state['state'] }} </label>
    {{-- 数量输入框使用和同块复选框完全一致的关联键，无论是否选中都会随表单提交 --}}
    <input 
        type="hidden" 
        class="list quantity" 
        name="market_quantities[{{ $state['id'] }}]"
        min="1" 
        value="1"
    />
</div>

注：如果当前循环没有现成的选项唯一ID，也可以直接用选项本身的文本值作为关联键，只要保证同个选项块内的两个输入框数组键完全一致即可。

2. 保留原有JS交互逻辑 #

原代码中实现的下拉展开、选中后切换数量输入框类型、实时同步下拉框选中内容的逻辑不需要调整，现有DOM结构下原有的索引遍历逻辑可以正常工作。

3. 表单提交后的取值方式 #

根据提交场景，可通过两种路径拿到精准匹配的选项与数量：

场景1：原生表单提交（Laravel后端接收）

直接从请求实例中取出两个带相同键的数组，遍历匹配即可：

// 拿到所有被勾选的选项，数组键为之前设置的选项唯一标识，值为选项名称
$selectedMarkets = $request->input('markets', []);
// 拿到所有选项对应的数量，数组键和选项数组完全一致
$marketQuantities = $request->input('market_quantities', []);
// 遍历匹配，完全不会出现错位
foreach ($selectedMarkets as $stateId => $marketName) {
    $currentQuantity = $marketQuantities[$stateId] ?? 1;
    // 此处即可获取到每个选中选项绑定的精准数量
}

场景2：JS拦截表单提交（AJAX/Fetch提交）

在表单的submit事件中，通过DOM层级关系直接绑定同块的复选框与数量输入框，不需要依赖全局数组顺序：

document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    const submitPayload = [];
    // 遍历所有选中的复选框
    document.querySelectorAll('.content input[type="checkbox"]:checked').forEach(checkbox => {
        // 定位当前复选框所属的选项块容器
        const optionBlock = checkbox.closest('.list');
        // 从同个块内取出对应的数量输入框
        const quantityInput = optionBlock.querySelector('.quantity');
        submitPayload.push({
            option: checkbox.value,
            quantity: quantityInput.value
        })
    })
    // submitPayload即为所有选中选项与对应数量的精准映射集合，可直接发送给后端
})

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