Question

我有一个表单，根据用户对select元素组的选择重定向用户。我正在尝试将其转换为使用单选按钮而不是选择列表，但保留原始功能。

 <form>
 <p>option1 </p>
   <select id="option1">
   <option value="0" id="Select">Select</option>
    <option value="1" id="coffee">Coffee</option>
    </select>

    <p>option2</p>
    <select id="option2">
    <option value="0" id="Select">Select</option>
    <option value="1" id="White">White</option>
    <option value="2" id="Black">Black</option>
    </select>

        <p>option3</p>
    <select id="option3">
     <option value="0" id="Select">Select</option>
    <option value="1" id="std">STD</option>
    <option value="2" id="300">300</option>
    <option value="3" id="500">500</option>
    </select>

        <p>option4</p>
    <select id="option4">
    <option value="0" id="Select">Select</option>
    <option value="1" id="america">America (NT - ST)</option>
    <option value="2" id="australia">Australia and Oceania</option>
    </select>
<br><br>


    <input  onclick="goToPage();"  type="button" value="Submit" />
        </form>

<script type="text/javascript">

function goToPage()
{
  var option1 = document.getElementById("option1").value;
  var option2 = document.getElementById("option2").value;
  var option3 = document.getElementById("option3").value;
  var option4 = document.getElementById("option4").value;

 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"; }
}
</script>

Answer 1

<强> Demo

基本上用＆lt; input type =“radio”＆gt; s替换所有＆lt;选项＆gt; 每个＆lt;选项＆gt;组＆lt; select id =“X”＆gt;成为＆lt; input name =“X”＆gt;

这将为每个旧的＆lt; select＆gt;创建一个组然后，要获取值，我们必须获取该组的所有单选按钮（getElementsByName）并找出哪个是checked（getValue）。

现在，你可以随心所欲地做任何你想要的事情！

<强> CODE：

<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";
    */
}

Answer 2

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

Answer 3

试试这个（见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

的值即可

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

3 个答案: