Question

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

2012-06-04

4837

javascript html

好的，我检查了很多其他答案，但那里发布的解决方案超出了我正在上的课程的范围。即我们还没有讨论如何做到这一点。

无论如何，我只是想从单选按钮中获取值，这是我的 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" />

当我 alert(arrivalcity); 时，我得到的只是 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

参考

Answer 2

你的主体中是否有一个名为 reservation 的表单？

它将像这样工作：

<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);
}

查看此在 jsfiddle 上运行。

Answer 3

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/