复选框关联输入框仅首个生效，其余返回null的技术问题求助

问题描述 #

表格内每个条目包含复选框和关联输入框，需求为点击复选框时显示对应输入框，后端同时捕获复选框ID与输入框数量值。当前仅第一个条目功能正常，其余条目点击复选框后，后端获取的quantity值为null。

核心问题分析 #

1. 前端输入框标识缺失：quantity输入框未设置唯一ID，JS无法精准定位对应输入框，导致显示逻辑失效。
2. 数组索引不匹配：requisitions[]和quantities[]采用无索引数组提交，未勾选的复选框不会被提交，但隐藏的输入框仍会提交空值，导致后端遍历的索引无法一一对应。
3. 数据关联逻辑错误：后端依赖循环索引匹配复选框和数量，而非通过唯一ID关联，导致索引错位时数据匹配失败。

修复方案 #

1. 修改前端HTML代码 #

为quantity输入框添加唯一ID，并将name改为关联数组格式，用mainStore->id作为键，确保数据一一对应：

<div class="custom-control custom-checkbox">
  <input type="checkbox" name="requisitions[]" value="{{ $mainStore->id }}" id="requisition-{{ $mainStore->id }}" class="form-check-input requisition-checkbox" style="display: none;" />
  <input type="text" name="quantities[{{ $mainStore->id }}]" id="requisition-quantity-{{ $mainStore->id }}" class="requisition-quantity form-control" style="display: none;">
  <input type="hidden" name="inventoryable_type" value="{{ $mainStore }}">
</div>

2. 调整前端JS代码 #

确保能正确获取对应输入框，隐藏时清空输入框值，避免提交空数据：

const requisitionCheckboxes = document.querySelectorAll('.requisition-checkbox');
requisitionCheckboxes.forEach(function(checkbox) {
    checkbox.addEventListener('change', function() {
        const index = checkbox.value;
        const quantityInput = document.getElementById('requisition-quantity-' + index);
        if (checkbox.checked) {
            quantityInput.style.display = 'block';
        } else {
            quantityInput.style.display = 'none';
            quantityInput.value = ''; // 清空值，避免提交空字符串
        }
        toggleRequisitionButtonVisibility();
    });
});

3. 更新后端PHP处理代码 #

通过复选框的requisitionId直接关联quantities数组的键，不再依赖循环索引：

protected function filterSelectedRequisitions(array $data)
{
    $quantities = $data['quantities'] ?? [];
    $requisitions = $data['requisitions'] ?? [];

    $selectedRequisitions = [];
    foreach ($requisitions as $requisitionId) {
        // 直接用requisitionID作为键匹配数量，确保关联正确
        if (isset($quantities[$requisitionId]) && trim($quantities[$requisitionId]) !== '') {
            $selectedRequisitions[] = [
                'inventory_id' => $requisitionId,
                'quantity' => trim($quantities[$requisitionId])
            ];
        }
    }

    return $selectedRequisitions;
}

修复说明 #

• 前端通过唯一ID绑定复选框与输入框，确保显示/隐藏逻辑精准执行；
• 关联数组格式提交数量数据，让每个数量值与对应的inventoryID直接绑定，彻底避免索引错位问题；
• 后端直接通过inventoryID匹配数量，逻辑更清晰，数据匹配准确率100%。

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