如何获取单选按钮组的选中具体值，而非输出console=on？

嘿，我一眼就看出问题所在啦！你现在遇到的console=on是因为两个关键问题：单选按钮没设value属性，还有按钮ID写错了，咱们一步步来解决：

1. 核心问题：单选按钮缺少value属性 #

浏览器对于未设置value的选中单选框，默认会把值设为on，这就是你看到console=on的原因。你需要给每个单选按钮加上对应选项的value，这样提交时就能拿到具体标识了。

修改后的HTML单选框代码：

<div class="radio radio-info">
  <input name="console" id="it" class="form-control" type="radio" value="ti">
  <label for="it">Interactive &amp; TTY <span class="text-blue">(-i -t)</span> </label>
</div>
<div class="radio radio-info">
  <input name="console" id="tty" class="form-control" type="radio" value="t">
  <label for="tty">TTY <span class="text-blue">(-t)</span> </label>
</div>
<div class="radio radio-info">
  <input name="console" id="interactive" class="form-control" type="radio" value="i">
  <label for="interactive">Interactive <span class="text-blue">(-i)</span> </label>
</div>
<div class="radio radio-info">
  <input name="console" id="none" class="form-control" type="radio" checked="" value="none">
  <label for="none">None</label>
</div>

2. 修复按钮ID的错误 #

你的提交按钮写了id="#btnSubmit"，多了个多余的#号，这会导致jQuery的$('#btnSubmit')找不到这个元素，点击事件根本不会触发！改成下面这样：

<button type="button" id="btnSubmit">Submit</button>

3. 测试效果 #

现在点击提交按钮，serialize()就会输出类似console=ti、console=t这样的结果，清晰对应你选中的选项。如果你想单独获取选中项的标识，也可以直接用jQuery快速拿到：

$('#btnSubmit').click(function() {
  // 直接获取选中单选框的value
  const selectedOption = $('input[name="console"]:checked').val();
  console.log('选中的选项:', selectedOption);
  
  // 原来的serialize方法也能正常工作了
  var data = $('#containerCreationForm').serialize();
  console.log(data);
});

这样就能完美解决你的问题啦！

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