0

我有一个表单，它根据用户对一组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>
4

3 回答 3

0

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

于 2013-07-24T08:08:19.417 回答
0

演示

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

这将为每个旧的 <select> 创建一个组。
然后，要获取值，我们必须获取该组的所有单选按钮 ( 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";
    */
}
于 2013-07-24T07:26:39.910 回答
0 
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
    }
});
于 2013-07-24T07:43:12.593 回答