表单checkbox选中值无法写入Firebase数据库问题排查

现存问题点 #

• HTML语法不规范：单页面内id属性必须全局唯一，现有代码给4个复选框全部设置了相同的id="paint"，属于无效DOM结构，会导致元素查询异常；另外复选框默认即为未选中状态，额外写unchecked属性不符合HTML规范，属于冗余无效代码。
• 取值逻辑错误：document.querySelectorAll()返回值是DOM节点集合（NodeList），不是Firebase支持序列化的普通数据类型，直接传入节点对象会导致写入失败、控制台看不到对应数据。
• 隐藏逻辑bug：原代码直接调用formBid.reset()但没有提前定义formBid变量，提交后大概率会触发变量未定义的报错。

修复步骤 #

1. 修正HTML代码 #

删除复选框上重复的id属性和无效的unchecked属性，保留class="paint"作为选择器标识即可：

<td>
    <label>
        <input class="paint" value="Anti-Fungus Paint" type="checkbox"> Anti-Fungus Paint
    </label>
    <label>
        <input class="paint" value="Emulsion Paint" type="checkbox"> Emulsion Paint
    </label>
    <label>
        <input class="paint" value="Anti-Corrosive Paint" type="checkbox"> Anti-Corrosive Paint
    </label>
    <label>
        <input class="paint" value="All in one Paint" type="checkbox"> All in one Paint
    </label>
</td>

2. 修正JavaScript提交逻辑 #

提交表单时先把选中的复选框值提取为普通字符串数组，再写入Firebase，同时修复表单重置的变量问题：

document.getElementById('formBid').addEventListener('submit',function(e){
    e.preventDefault();
    const quoteId = Date.now();
    // 遍历选中的复选框，提取值组装为普通数组
    const selectedPaintItems = Array.from(document.querySelectorAll('input.paint:checked'))
        .map(checkbox => checkbox.value);

    set(ref(db, 'quotes/' + quoteId), {
        paint: selectedPaintItems
    }).then(() => {
        alert('Quote Sent To Client');
        // 直接通过事件上下文获取表单元素执行重置，无需额外定义变量
        e.target.reset();
    }).catch(error => {
        console.log('数据写入失败：', error);
    });
});

修复后写入Firebase的paint字段为选中项的字符串数组，例如同时选中前两项时，存储值为["Anti-Fungus Paint", "Emulsion Paint"]，可正常在Firebase控制台查看、读取。

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