HTML Radio 是一种单选按钮，它允许用户从多个选项中选择一个，与复选框(<input type="checkbox">)不同，单选按钮只能选择一个选项，在 HTML 中，可以使用 <input type="radio"> 标签创建单选按钮。
如何使用 HTML Radio?
1、添加单选按钮
在 HTML 文件中，使用 <input type="radio"> 标签创建单选按钮，将标签放在 <form> 标签内，以便将表单数据提交到服务器，为每个单选按钮分配一个唯一的 name 属性，以便在提交表单时识别所选选项。
<form action="/submit" method="post"> <input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 <input type="submit" value="提交"> </form>
2、设置默认选项
如果需要在页面加载时设置默认选项，可以在相应的单选按钮上添加 checked 属性，这将在浏览器加载页面时自动选中该选项。
<form action="/submit" method="post"> <input type="radio" name="gender" value="male" checked> 男 <input type="radio" name="gender" value="female"> 女 <input type="submit" value="提交"> </form>
3、处理表单数据
当用户提交表单时，可以通过 JavaScript 或者 PHP 等服务器端语言获取所选选项的值，使用 JavaScript:
<script>
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var selectedGender = document.querySelector('input[name="gender"]:checked').value;
console.log('选中的性别：', selectedGender);
});
</script>
相关问题与解答
1、如何禁用所有单选按钮？
要禁用所有单选按钮，可以将它们包裹在一个容器元素(如 <div>)中，并为该容器元素添加 disabled 属性，这将使得容器内的所有子元素都无法被点击。
<div disabled> <input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 </div>
2、如何实现单选按钮之间的互斥性？
要实现单选按钮之间的互斥性，可以使用 JavaScript 为具有相同 name 属性的多个单选按钮添加事件监听器，当一个单选按钮被选中时，取消其他具有相同 name 属性的单选按钮的选中状态。
<script>
var radios = document.querySelectorAll('input[type="radio"]');
for (var i = 0; i < radios.length; i++) {
radios[i].addEventListener('change', function() {
var otherRadios = radios.filter(function(other) { return other !== this; });
otherRadios.forEach(function(other) { other.checked = false; });
});
}
</script>
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/229565.html
微信扫一扫 