我正在开发一个带有单选按钮和相关选项的网页。在选择单选按钮时，我想打开相应的 html 页面。我发现这个问题的唯一解决方案包含指向外部网页的URL，这是我不想要的。
我现在拥有的HTML代码是：
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
</head>
<body>
<h2>Select your user classification below:</h2>
<form >
<input type="radio" name="usertype" value="admin">Admin
<br>
<input type="radio" name="usertype" value="hod">HOD
<br>
<input type="radio" name="usertype" value="tstaff">Teaching Staff
<br>
<input type="radio" name="usertype" value="ntstaff">Non Teaching Staff
<br>
<input type="radio" name="usertype" value="cr">CR
<br>
<input type="radio" name="usertype" value="student">Student
</br>
<input type="submit" value="Submit">
</form>
</body>
</html>
一个例子：如果我选择admin并单击提交，我想打开"admin.html"，它与"index.html位于同一文件夹中
使用Javascript，JQuery和PHP的解决方案将不胜感激。
你可以有这个脚本：
$(function(){
$('form').on('submit',function(){
event.preventDefault();
location.href =$("input[name=usertype]:checked").val()+".html";
});
});
$(function(){
$('form').on('submit',function(){
event.preventDefault();
var value=$("input[name=usertype]:checked").val();
switch(value){
case "admin": location.href='admin.html'; break;
case "hod": location.href='hod.html'; break;
case "tstaff": location.href='tstaff.html'; break;
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Select your user classification below:</h2>
<form >
<input type="radio" name="usertype" value="admin">Admin
<br>
<input type="radio" name="usertype" value="hod">HOD
<br>
<input type="radio" name="usertype" value="tstaff">Teaching Staff
<br>
<input type="radio" name="usertype" value="ntstaff">Non Teaching Staff
<br>
<input type="radio" name="usertype" value="cr">CR
<br>
<input type="radio" name="usertype" value="student">Student
</br>
<input type="submit" value="Submit">
</form>这可能有效。单击单选按钮时，它将打开一个窗口。 您需要解释"开放"的含义。导航到，弹出？ 另一个标签？新窗口？
<style type="text/css">
button{border:0;}
</style>
<form action="link" target="_blank" ><button type="submit">
<input type="radio" name="usertype" value="admin">Admin
</button></form>
你真正想要的：
向单选按钮添加 ID
<input id="r1" type="radio" name="usertype" value="admin">Admin
<input id="r2" type="radio" name="usertype" value="hod">HOD
取代
<input type="submit" value="Submit">
跟
<button type="button" onclick="go()">Submit</button>
和JS代码：
function go(){
if(document.getElementById('r1').checked){location.href='admin.html';}
else if(document.getElementById('r2').checked){location.href='hod.html';}
}
属性 .checked 返回 true 或 false。
你真正应该做的是：
只需使用锚点代替单选按钮即可。