如何在Express+Handlebars应用中获取表单提交的复选框值？

当然可以不用jQuery！用原生JavaScript就能完美实现你的需求，我给你准备了两种方案，你可以根据自己的习惯选择：

原生JavaScript实现 #

核心思路是监听表单提交事件，筛选出被勾选的复选框，再通过复选框的id关联对应的label元素，提取文本内容：

// 获取目标表单
const form = document.getElementById('selectYourSpec');

// 监听表单提交事件
form.addEventListener('submit', function(e) {
    // 阻止表单默认跳转，先处理数据
    e.preventDefault();

    // 筛选#languages下所有被勾选的复选框
    const checkedBoxes = document.querySelectorAll('#languages input[type="checkbox"]:checked');

    // 收集对应的标签文本
    const selectedLanguages = Array.from(checkedBoxes).map(checkbox => {
        // 通过复选框id找到对应的label
        const targetLabel = document.querySelector(`label[for="${checkbox.id}"]`);
        // 提取并清理文本内容
        return targetLabel.textContent.trim();
    });

    // 这里可以把数据发送到Express后端，比如用fetch API
    console.log('选中的语言：', selectedLanguages);
    
    // 示例：发送POST请求到后端
    // fetch('/userSpecialisation', {
    //     method: 'POST',
    //     headers: { 'Content-Type': 'application/json' },
    //     body: JSON.stringify({ languages: selectedLanguages })
    // });
});

jQuery实现（可选） #

如果你更熟悉jQuery，也可以用这种更简洁的写法：

$('#selectYourSpec').on('submit', function(e) {
    e.preventDefault();

    const selectedLanguages = [];

    // 遍历所有被勾选的复选框
    $('#languages input[type="checkbox"]:checked').each(function() {
        // 找到对应label并提取文本
        const labelText = $(`label[for="${$(this).attr('id')}"]`).text().trim();
        selectedLanguages.push(labelText);
    });

    console.log('选中的语言：', selectedLanguages);

    // 示例：用jQuery发送POST请求
    // $.post('/userSpecialisation', { languages: selectedLanguages });
});

后端接收提示 #

不管用哪种前端方案，后端Express需要先配置好解析JSON的中间件：

// 在你的Express入口文件中添加
app.use(express.json());

// 然后在路由中接收数据
app.post('/userSpecialisation', (req, res) => {
    const selectedLanguages = req.body.languages;
    // 处理你的业务逻辑
    console.log('后端收到的选中语言：', selectedLanguages);
    res.status(200).send('接收成功');
});

内容的提问来源于stack exchange，提问作者K.Karapetyan