Question

我想知道HTML5中是否有办法根据用户选择使用HTML5选择单选按钮的方式将用户带到特定页面。

例如，如果用户选择“男性”单选按钮并点击提交，那么我想将他带到.../male.html或者如果选择了女性，然后点击提交然后将她带到.../female.html

如果在HTML5中无法做到这一点，尽管我缺乏使用该语言的经验，但我可以在javascript中找到一些东西。但是，我不知道如何实现代码只在按下提交时运行，你能给我一点指导吗？

作为旁注，我不希望使用任何jQuery或其他库。如果可能的话，我希望它是HTML5，或简单的javascript。

Answer 1

HTML（5）：

<form id="form">
    <input type="radio" name="gender" id="gender-male" value="Male" />
    <input type="radio" name="gender" id="gender-female" value="Female" />
</form>

JS（5）：

var submit = function (e) {
    if (e.preventDefault) {
        e.preventDefault();
    }

    if (document.getElementById('gender-male').checked) {
        window.location = 'male.html';
    } else if (document.getElementById('gender-female').checked) {
        window.location = 'female.html';
    }

    return false;
};

window.onload = function () {
    var form = document.getElementById('form');

    if (form.attachEvent) {
        form.attachEvent('submit', submit);
    } else {
        form.addEventListener('submit', submit);
    }
}

Answer 2

创建了一个jsfiddle来演示如何使用HTML和Javascript完成它。只用HTML就无法做到这一点。

http://jsfiddle.net/benwong/W4FVC/

HTML

<input id="MaleRadio" type="radio" name="sex" value="male" checked="checked">male</input>
<input id="FemaleRadio" type="radio" name="sex" value="female">female</input>
<input id="SubmitButton" type="submit" value="submit" />

的Javascript

var maleRadio = document.getElementById("MaleRadio"),
    femaleRadio = document.getElementById("FemaleRadio"),
    submitButton = document.getElementById("SubmitButton");

submitButton.addEventListener("click", function () {
    if (maleRadio.checked) {
        alert('male');
        window.location = "male.html";
    } else {
        alert('female');
        window.location = "female.html";
    }
}, false);

根据单选按钮有条件地重定向

2 个答案: