Question

好的，我已经检查了很多其他答案，但是那里发布的解决方案超出了我正在上课的范围。 IE我们还没有讨论过如何这样做。

无论如何，我只是想从这里的单选按钮获取值是我的HTML代码和我的javascript。

<script type="text/javascript">
function bookTrip()
{
    var arrivalcity;

    arrivalcity = document.reservations.radCity.value;

    alert(arrivalcity);
}
</script>

并且我的html代码中的实际按钮看起来像这样。

    Milwaukee: ($20) <input type="radio" name="radCity" value="20" />

当我提醒（到达城市）;我得到的只是NaN。我不明白为什么，不应该返回字符串20 ??

请允许我澄清一下。我有3个不同的城市选择。我编辑它以准确显示我开始表格时的所有内容。

<form name="reservations">
    <p>First Name: <input type="text" name="txtFirstName" />
    Last Name: <input type="text" name="txtLastName" /></p>

    <span style="font-weight:bold;">Arrival City:</span><br />

    Milwaukee: ($20) <input type="radio" name="radCity" value="20" /><br />
    Detriot: ($35) <input type="radio" name="radCity" value="35" /><br />
    St. Louis: ($40) <input type="radio" name="radCity" value="40" />

我需要从所选的任何一个中获取值。我无法将其硬编码到我的脚本中。

Answer 1

此功能将通过querySelector方法执行您想要的操作：

function selectedRadio(){
    var selValue = document.querySelector('input[name="radCity"]:checked').value;
    alert(selValue);
}

JSFiddle

Reference

Answer 2

您的身体中是否有名为预约的表格？

它会像这样工作：

<form name="reservations">
 <input type="radio" name="radCity" value="20" />
</form>

function bookTrip()
{
    var arrivalcity;
    arrivalcity = document.reservations.radCity.value;
    alert(arrivalcity);
}

看到它在这里运行：http://jsfiddle.net/eBhEm/

然而，我更愿意这样做：

<input type="radio" id="radCity" value="20" />

然后使用getElementById

function bookTrip()
{
    var arrivalcity;
    arrivalcity = document.getElementById("radCity").value;
    alert(arrivalcity);
}

请参阅此running on jsfiddle。

Answer 3

您可以在支持它的浏览器中使用querySelector，但并非所有使用的浏览器都支持。老式（可靠，健壮，适用于所有地方）方法是循环遍历集合以找到被检查的集合：

function getValue() {
  var buttonGroup = document.forms['reservations'].elements['radCity'];
  // or 
  // var buttonGroup = document.reservations.radCity;

  // Check for single element or collection, collections don't have
  // a tagName property
  if (typeof buttonGroup.tagName == 'string' && buttonGroup.checked) {
      return buttonGroup.value;

  } else {

    // Otherwise, it's a collection
    for (var i=0, iLen=buttonGroup.length; i<iLen; i++) {
      if (buttonGroup[i].checked) {
        return buttonGroup[i].value;
      }
    }
  }
}

请注意，HTMLCollection和DOM元素之间的测试使用DOM元素必须具有的属性，但HTMLCollection不应该具有该属性，除非该集合的成员具有名称“tagName”。

Answer 4

function bookTrip() {
var arrivalcity= document.reservations.radCity;

for (var i = 0, iLen = arrivalcity.length; i < iLen; i++) {
    if (arrivalcity[i].checked) {
        alert(arrivalcity[i].value);

    }
}

}

我相信这应该会有所帮助。

看到它在这里工作 http://jsfiddle.net/eBhEm/24/

如何从javascript中的单选按钮检索值？

4 个答案: