选择的单选按钮转到 URL答案

【问题标题】：Radio buttons selected go to URL选择的单选按钮转到 URL
【发布时间】：2014-02-12 15:17:23
【问题描述】：

我正在尝试使用所选单选按钮的值转到特定 URL。目前我使用的 Javascript 是选择输入的第一个“id”，而不是使用实际选择的值。

HTML

<form action="https://www.neurodimension.net/solo/products/Cart.aspx" method="POST" id="myForm" onsubmit="changeActionURL();">
         <input type="radio" name="ns_license" id="ns_license" value="1025" />NeuroSolutions Pro<br />
         <input type="radio" name="ns_license" id="ns_license" value="1024" />NeuroSolutions<br />
         <input type="radio" name="ns_license" id="ns_license" value="1026" />NeuroSolutions Student
         <input type="submit" />    
</form>

Javascript

<script type="text/javascript">
function changeActionURL() {
var forma = document.getElementById('myForm');
forma.action += "?action=add&actiondata0=" + document.getElementById('ns_license').value;
}
</script>

【问题讨论】：

标签： javascript html forms radio-button

【解决方案1】：

您有多个相同的 ID，这很糟糕！ getElementById 期望得到一个结果，它通过获取具有该 ID 的第一个元素来获得一个结果（忽略你的其他 2，因为它应该）。对相似元素使用class 属性。

    <input type="radio" name="ns_license" class="ns_license" value="1025" />NeuroSolutions Pro<br />
     <input type="radio" name="ns_license" class="ns_license" value="1024" />NeuroSolutions<br />
     <input type="radio" name="ns_license" class="ns_license" value="1026" />NeuroSolutions Student

并获取选中的元素

var checkedElem = document.querySelector(".ns_license:checked");

如果querySelector 是不可能的：

var elems = document.getElementsByClassName("ns_license"),
    checkedIndex = 0;

for (var i = 0; i < elems.length; i++) {
    if (elems[i].checked)
        checkedIndex = i;
}

您当前选中的元素位于elems[checkedIndex]

【讨论】：

【解决方案2】：

要更改元素的特定属性，可以使用

setAttribute()

javascript 的功能。这应该使它工作。

【讨论】：

【解决方案3】：

虽然querySelector 适用于现代浏览器，但不适用于 IE

如果你想你可以遍历radios by name，然后检查值是否被检查。如果是则返回该值。那就是getRadioValue()函数的使用：

<form action="https://www.neurodimension.net/solo/products/Cart.aspx" method="POST" id="myForm" onsubmit="changeActionURL();">
         <input type="radio" name="ns_license" id="ns_license" value="1025" />NeuroSolutions Pro<br />
         <input type="radio" name="ns_license" id="ns_license" value="1024" />NeuroSolutions<br />
         <input type="radio" name="ns_license" id="ns_license" value="1026" />NeuroSolutions Student
         <input type="submit" />    
</form>

<script type="text/javascript">
function changeActionURL() {
    var forma = document.getElementById('myForm');
    forma.action += "?action=add&actiondata0=" + getRadioValue('ns_license');
}

function getRadioValue(name){
    var rads = document.getElementsByName('ns_license');
    for(var x=0; x<rads.length;x++){
        if(rads[x].checked){
            return rads[x].value;
        }
    }
}
</script>

【讨论】：