将表单从选择下拉字段更改为单选按钮并保留功能

HTML:
<form>
    <p>option3</p>
    <input type="radio" name="option3" id="std" />STD
    <input type="radio" name="option3" id="300" />300
    <input type="radio" name="option3" id="500" />500
     <p>option4</p>
     <input type="radio" name="option4" id="america" />America (NT - ST)
     <input type="radio" name="option4" id="australia" />Australia and Oceania
     <input type="button" onclick="goToPage();" value="Submit" />
</form>
JS:
function goToPage() {
    var option3 = document.getElementsByName("option3");
    var option4 = document.getElementsByName("option4");
    // if "300" and "America (NT - ST) is checked
    if (option4[0].checked && option3[1].checked) {
        // do something
    }
});

演示

基本上替换所有<选项>s的<input type="radio">s
其中每个<选项>组<select id="X">变成<input name="X">

这将为每个旧<选择>s.
然后，要获得值，我们必须获得该组（getElementsByName）的所有单选按钮，并找出哪个是checked（getValue）。

现在，你可以用价值观做任何你想做的事！

代码：

<form id="form">
    <p>option1 </p>
    <input type="radio" name="option1" value="0" id="Select" />Select
    <input type="radio" name="option1" value="1" id="coffee" />Coffee
    <p>option2</p>
    <input type="radio" name="option2" value="0" id="Select" />Select
    <input type="radio" name="option2" value="1" id="White" />White
    <input type="radio" name="option2" value="2" id="Black" />Black
    <p>option3</p>
    <input type="radio" name="option3" value="0" id="Select" />Select
    <input type="radio" name="option3" value="1" id="std" />STD
    <input type="radio" name="option3" value="2" id="300" />300
    <input type="radio" name="option3" value="3" id="500" />500
    <p>option4</p>
    <input type="radio" name="option4" value="0" id="Select" />Select
    <input type="radio" name="option4" value="1" id="america" />America (NT - ST)
    <input type="radio" name="option4" value="2" id="australia" />Australia and Oceania
    <br/><br/>
    <input  onclick="goToPage();"  type="button" value="Submit" />
</form>

function getValue(radios) {
    for (var index = 0; index < radios.length; ++index) {
        if (radios[index].checked)
            return radios[index].value;
    }
    return null;   
}
function goToPage() {
    var option1 = getValue(document.getElementsByName("option1"));
    var option2 = getValue(document.getElementsByName("option2"));
    var option3 = getValue(document.getElementsByName("option3"));
    var option4 = getValue(document.getElementsByName("option4"));
    //demo option1's value
    alert(option1);
    /*your code here
    if (option1==1 && option2==1 && option3==1 && option4==1)
        window.location = "http://www.testint.com/us";
    else if (option1==1 && option2==2 && option3==3 && option4==2)
       window.location = "http://www.testing.com/au";
    */
}

试试这个（请参阅JSFidle）：

JS-

// Taken from http://stackoverflow.com/questions/1682964/in-javascript-how-can-i-get-all-radio-buttons-in-the-page-with-a-given-name
function getCheckedValue(groupName) {
    var radios = document.getElementsByName(groupName);
    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
            return radios[i].value;
        }
    }
    return null;
}
function goToPage() {
    values = [];
    for (var j = 1; j < 5; j++) {
        values[j] = getCheckedValue("option" + j);
    }
    if (values[1] == 1 && values[2] == 1 && values[3] == 1 && values[4] == 1) {
        window.location = "http://www.testint.com/us";
    } else if (values[1] == 1 && values[2] == 2 && values[3] == 3 && values[4] == 2) {
        window.location = "http://www.testing.com/au";
    }
}

HTML

<form>
    <p>option1</p>
    <input type="radio" name="option1" value="1" />Coffee
    <p>option2</p>
    <input type="radio" name="option2" value="1" />White
    <input type="radio" name="option2" value="2" />Black
    <p>option3</p>
    <input type="radio" name="option3" value="1" />STD
    <input type="radio" name="option3" value="2" />300
    <input type="radio" name="option3" value="3" />500
    <p>option4</p>
    <input type="radio" name="option4" value="1" />America (NT - ST)
    <input type="radio" name="option4" value="2" />Australia and Oceania
    <br />
    <br />
    <input onclick="goToPage();" type="button" value="Submit" />
</form>

这非常有效，因为您的输入名称是1-5，所以我们可以循环这些数字来找到结果（尽管将它们命名为0-4会更好！）。如果您需要添加更多的组，那么只需增加j < 5 的值