网页单选按钮代码

单选按钮（Radio Button）是网页表单中常见的一种输入控件，允许用户从一组选项中选择一个。在 HTML 中，单选按钮通过 标签配合 type="radio" 属性来创建。下面将详细介绍如何使用 HTML 和 CSS 创建和样式化单选按钮，以及如何使用 JavaScript 来增强其功能。

HTML 基础

在 HTML 中创建单选按钮的基本代码结构如下：

  
  选项 1

  
  
  选项 2

  
  
  选项 3

  
  

这里的 name 属性用于将多个单选按钮分组，同一组内的单选按钮只能选择一个。value 属性表示单选按钮的值，当表单提交时，选中的单选按钮的值会随表单数据一起提交。

CSS 样式化

为了使单选按钮更加美观，可以使用 CSS 来样式化它们。以下是一个简单的例子：

input[type="radio"] {
  display: none; /* 隐藏原生单选按钮 */
}

label {
  display: inline-block;
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
  border: 2px solid #ccc;
  border-radius: 5px;
}

input[type="radio"]:checked   label {
  background-color: #f0f0f0;
  border-color: #333;
}

在这个例子中，我们将原生的单选按钮隐藏起来，并通过 label 标签来模拟单选按钮的外观。当单选按钮被选中时，对应的标签会改变背景色和边框颜色。

JavaScript 交互

JavaScript 可以用来增强单选按钮的交互性。例如，可以添加一个事件监听器来处理单选按钮的选中事件：

document.addEventListener('DOMContentLoaded', function() {
  var radios = document.querySelectorAll('input[type="radio"]');
  
  radios.forEach(function(radio) {
    radio.addEventListener('change', function() {
      if (this.checked) {
        alert('选中了选项：'   this.value);
      }
    });
  });
});

这段代码首先获取所有的单选按钮，然后为它们添加 change 事件的监听器。当单选按钮的状态改变时，如果它被选中，则会弹出一个警告框显示选中的值。

表单验证

在表单提交之前，进行验证是一个好的实践。可以使用 JavaScript 来确保用户已经选择了一个单选按钮：

document.querySelector('form').addEventListener('submit', function(event) {
  var checked = document.querySelector('input[type="radio"]:checked');
  if (!checked) {
    alert('请先选择一个选项！');
    event.preventDefault(); // 阻止表单提交
  }
});

这段代码会在表单提交时检查是否有单选按钮被选中，如果没有，则会显示一个警告，并阻止表单的提交。

结语

单选按钮是网页表单中重要的用户界面元素之一。通过 HTML 创建单选按钮，CSS 进行样式化，以及 JavaScript 添加交互和验证，可以创建一个既美观又功能完备的表单。掌握这些基础知识，可以帮助你在网页开发中更好地实现用户交互设计。