点击提交按钮后单选按钮值返回undefined问题求助

我来帮你排查这个问题，你遇到的点击提交后单选值始终返回undefined的情况，主要是两个原因导致的：

1. 事件绑定的目标对象错误 #

你当前把点击事件绑定在了severityFormValue这个对象上，但实际我们需要监听的是**提交按钮#severityFormSubmit**的点击事件——毕竟只有用户点击提交按钮时，才需要去获取单选框的选中值呀！原来的事件绑定时机不对，导致获取值的代码根本没在正确的场景下执行。

2. jQuery选择器的空格问题（非核心但需规范） #

你的选择器里写了name = allStable这种格式，等号两边的空格虽然jQuery可能兼容，但标准的属性选择器写法应该是name="allStable"（去掉空格），这样能避免潜在的选择器匹配异常。

修正后的完整代码 #

HTML部分（无需改动，保持原样即可）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="dropdown"> 
  <button class="dropbtn" id="CCR_DACEbtn">CCR DACE ▼</button> 
  <div id="drowdownCCR_DACEID" class="dropdown-content"> 
    Submitted by: 
    <input type="radio" name="loggedVia" value="phone" checked> phone 
    <input type="radio" name="loggedVia" value="email"> email<br> 
    All services stable? 
    <input type="radio" name="allStable" value="Yes"> Yes 
    <input type="radio" name="allStable" value="No" checked> No 
    <input type="radio" name="allStable" value="N/A"> N/A 
    <br> 
    Environment Down? 
    <input type="radio" name="EnvDown" value="Yes"> Yes 
    <input type="radio" name="EnvDown" value="No" checked> No 
    <input type="radio" name="EnvDown" value="N/A"> N/A 
    <br> 
    <button type="button" id="severityFormSubmit" >Submit</button> 
  </div> 
</div>

JavaScript部分（关键修正）

// 把事件绑定到提交按钮上
$('#severityFormSubmit').on("click", (e) => { 
  // 修正选择器的空格问题，确保精准匹配
  const loggedVia = $('input[name="loggedVia"]:checked').val(); 
  const allStable = $('input[name="allStable"]:checked').val(); 
  const envDown = $('input[name="EnvDown"]:checked').val(); 

  // 测试输出，你可以在这里处理获取到的值
  console.log("选中的表单值：", { loggedVia, allStable, envDown });
  
  // 也可以把值整合为一个对象方便后续使用
  const formData = { loggedVia, allStable, envDown };
  // 这里写你的后续业务逻辑，比如提交到后端等
}); 

这样修改后，点击提交按钮时就能正确获取每组单选框的选中值了，不会再返回undefined~ 另外小建议：变量名尽量遵循驼峰命名（比如把EnvDown改成envDown），能让代码风格更统一哦。

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