Javascript获取单选按钮输入值 解决多步表单Webhook提交无值问题

你无法获取单选按钮选中值的核心问题是点击单选按钮的事件回调中调用了e.preventDefault()，阻止了单选按钮默认的选中状态更新逻辑，所以单选按钮始终不会被标记为checked，自然无法读取到选中值。

修复步骤 #

1. 移除单选/复选框点击事件的e.preventDefault() #

如果需要保留点击后跳转步骤的逻辑，只需要删掉这行阻止默认行为的代码即可，同时可以新增全局对象存储表单答案，方便后续提交给Webhook，修改后的JS代码如下：

$(document).ready(function() {
    'use strict';
    // 全局存储所有表单答案，后续可直接提交给Integromat的Webhook
    const formAnswers = {};

    $('input[type=radio], input[type=checkbox]').on('click', function(e) {
        // 移除e.preventDefault()，允许单选框默认更新选中状态
        // 获取当前选中的字段名和值存入全局对象
        const fieldName = $(this).attr('name');
        formAnswers[fieldName] = $(this).val();
        // 保留原有步骤跳转逻辑
        $(this).parents('.test-step').next().addClass('active');
        $(this).parents('.test-step').removeClass('active');
    })

    $('.test-step .prev-btn').on('click', function(e) {
        e.preventDefault();
        $(this).parents('.test-step').prev().addClass('active');
        $(this).parents('.test-step').removeClass('active');
    })
})

2. 单独获取指定单选组选中值的方法 #

如果需要单独读取某组单选按钮的选中值，直接使用如下jQuery代码即可：

// 示例：获取员工数量单选组的选中值
const selectedCalisanSayisi = $('input[name="calisan-sayisi"]:checked').val();

额外注意事项 #

• 第一个单选按钮绑定的onclick="getVals(this, '1-2');"如果无实际用途建议删除，避免和jQuery绑定的点击事件产生冲突
• 单选按钮的id属性不建议包含空格，不符合HTML规范，可能会导致label和单选框的关联异常

内容的提问来源于stack exchange，提问作者Yağız Gürbüz