<!DOCTYPE html>
<html>
<head>
<title>HTML单选按钮设置点击函数</title>
</head>
<body>
<form>
<p>请选择您喜欢的水果:</p>
<input type="radio" name="fruit" value="apple" onclick="displayFruit()"> 苹果<br>
<input type="radio" name="fruit" value="banana" onclick="displayFruit()"> 香蕉<br>
<input type="radio" name="fruit" value="orange" onclick="displayFruit()"> 橙子<br>
</form>
<script>
function displayFruit() {
var radios = document.getElementsByName("fruit");
var value = "";
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
value = radios[i].value;
break;
}
}
alert("您选择了：" + value);
}
</script>
</body>
</html>
上面的代码创建了一个包含三个选项的“水果选择”单选按钮组。每个单选按钮都绑定了一个onclick事件处理函数displayFruit。当单选按钮被选中时，该函数会将选择的单选按钮的值显示在一个弹框中。
在displayFruit函数中，首先获取所有的单选按钮元素并循环遍历，判断哪个单选按钮被选中。如果找到被选中的单选按钮，则将其value属性值赋给value变量。最后，使用弹框显示选中的水果。
这就是为HTML单选按钮设置点击函数的方法。您可以根据需要定制您自己的单选按钮，并根据需求使用JavaScript来处理它们的点击事件。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
