var rates = document.getElementById('rates').value;

不能获得单选按钮的值，而是使用

rate_value = document.getElementById('r1').value;

如果你正在使用jQuery:

$（'input[name=“rate”]：checked'）.val（）;

您可以使用checked属性来获取该值。

var rates = document.getElementsByName('rate');
var rate_value;
for(var i = 0; i < rates.length; i++){
    if(rates[i].checked){
        rate_value = rates[i].value;
    }
}

假设你的表单元素是由下面的myForm变量引用的，并且你的单选按钮共享名称“my-radio-button-group-name”，以下是纯JavaScript和标准兼容的(尽管我没有检查它是否在任何地方都可用):

myForm.elements.namedItem("my-radio-button-group-name").value

上述操作将产生选中(或也称为选中)单选按钮元素(如果有)的值，否则为空。解决方案的关键是namedItem函数，它专门用于单选按钮。

看到HTMLFormElement。元素，HTMLFormControlsCollection.namedItem，特别是RadioNodeList。作为namedItem通常返回一个RadioNodeList对象。

(我使用MDN是因为它允许人们跟踪标准遵从性，至少在很大程度上是这样，而且因为它比许多WhatWG和W3C出版物更容易理解)

var rates = document.getElementById('rates').value;

rates元素是一个div，所以它没有值。这可能就是未定义的来源。

checked属性会告诉你元素是否被选中:

if (document.getElementById('r1').checked) {
  rate_value = document.getElementById('r1').value;
}

Or

$("input[type='radio'][name='rate']:checked").val();

使用文档。querySelector('input[type = radio]:checked').value;要获得所选复选框的值，你可以使用其他属性来获取值，如名称=性别等，请通过下面的代码片段，它肯定会对你有帮助，

解决方案

document.mainForm.onclick = function（）{ var gender = document.querySelector（'input[name = gender]：checked'）.value; result.innerHTML = 'You Gender： '+gender; } <form id=“mainForm” name=“mainForm”> <输入类型=“收音机”名称=“性别”值=选中“男性”/>小 <输入类型=“收音机”名称=“性别”值=“女性”/>女性 <输入类型=“电台” 名称=“性别” 值=“其他” />其他 </form> <span id=“result”></span>

感谢