如何在document.ready中获取嵌套结构的单选按钮值并传给router.post？

我是做数据工程的，对Web开发不太熟。现在页面上有一组单选按钮，想获取选中的值来执行不同的SQL查询，但试了几种方法都没用，console.log也没输出，最终需要把这个值传给router.post函数。

页面中的单选按钮代码 #

<div class="mb-5 mt-3">
    <label class="fs-6 form-label fw-bold m-darkgreen text-dark">Ranking
        Parameter</label>
    <div class="nav-group nav-group-fluid">
        <label>
            <input name = "Prioritize" type="radio" class="btn-check" name="type" value="Size"
                checked="checked" id="PriorityBySize">
            <span
                class="btn btn-sm btn-color-muted btn-active btn-active-primary fw-bold px-4">Size</span>
        </label>
        <label>
            <input name = "Prioritize" type="radio" class="btn-check" name="type" value="Vulnerability" id="PriorityByVulnerability">
            <span
                class="btn btn-sm btn-color-muted btn-active btn-active-primary fw-bold px-4">Vulnerability</span>
        </label>
    </div>
</div>

我尝试过的无效代码 #

// 尝试1：初始判断选中状态
if ($("#PriorityByVulnerability").is(":checked")) {
    var priorityText = "Vulnerability"
} else {
    var priorityText = "Size"
}
console.log(priorityText)

// 尝试2：监听change事件
$("input[name='Prioritize']").on("change", function() {
    var priorityText = $('input[name="Prioritize"]:checked').val();
    console.log("the sign is: " + sign); // 想让sign等于选中的单选按钮值
});

// 尝试3：绑定div的change事件
priorityText = $("#mb-5 mt-3").change(function() {
    if ($(this).is(':checked')) {
        alert($(this).val())};
    })

问题原因及解决步骤 #

1. 修复HTML的单选按钮分组错误 #

你的单选按钮重复设置了name="Prioritize"和name="type"，单选按钮是靠相同name值实现分组互斥的，这会导致选择逻辑混乱。删掉其中一个name属性，统一用name="Prioritize"：

<!-- 修正后的Size单选按钮 -->
<input name="Prioritize" type="radio" class="btn-check" value="Size" checked="checked" id="PriorityBySize">

<!-- 修正后的Vulnerability单选按钮 -->
<input name="Prioritize" type="radio" class="btn-check" value="Vulnerability" id="PriorityByVulnerability">

2. 修正JavaScript的错误逻辑 #

• 尝试2里的console.log用了未定义的变量sign，应该改成priorityText；
• 尝试3里的选择器$("#mb-5 mt-3")错误：mb-5 mt-3是class不是id，而且div不会触发change事件，必须监听单选按钮；
• 所有代码要放在$(document).ready()里，确保DOM加载完成后再执行：

$(document).ready(function() {
    // 获取初始选中值
    let priorityText = $('input[name="Prioritize"]:checked').val();
    console.log("初始选中值：", priorityText);

    // 监听单选按钮切换事件
    $("input[name='Prioritize']").on("change", function() {
        priorityText = $('input[name="Prioritize"]:checked').val();
        console.log("当前选中值：", priorityText);
    });

    // 示例：点击提交按钮时把值传给后端
    $("#submitBtn").on("click", function() {
        // 用AJAX发送POST请求到对应路由
        $.post("/your-route-path", { priority: priorityText }, function(response) {
            console.log("后端响应：", response);
        });
    });
});

3. 后端接收值（Express示例） #

如果后端用Express，router.post可以这样获取前端传的值：

router.post('/your-route-path', (req, res) => {
    const priority = req.body.priority;
    // 根据选中值执行对应SQL查询
    if (priority === 'Size') {
        // 执行Size相关查询逻辑
    } else if (priority === 'Vulnerability') {
        // 执行Vulnerability相关查询逻辑
    }
    // 返回结果给前端
    res.send({ success: true, data: queryResult });
});

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