input单选框：input单选框，从基础到应用

来源：网络作者：日期：2025-11-04 15:08:45

在HTML表单开发中,<input type="radio">单选框是用户与网页交互的重要元素之一，本文将从基础语法、应用场景、样式设计到高级交互，全面解析input单选框的使用方法。

基础概念与语法

input单选框用于让用户从多个选项中选择一个,其基本语法如下：

<!-- 单独的单选框 -->
<input type="radio" id="option1" name="group1" value="value1">
<!-- 与label标签结合 -->
<label>
  <input type="radio" name="group1" value="value1"> 选项一
</label>
<br>
<label>
  <input type="radio" name="group1" value="value2"> 选项二
</label>

关键属性：

name：同名的单选框属于同一组，只能选择一个
value：提交表单时返回的值
checked：默认选中（可添加：<input type="radio" checked>）

典型应用场景

性别选择表单

<form>
  <label><input type="radio" name="gender" value="male"> 男</label>
  <label><input type="radio" name="gender" value="female"> 女</label>
  <label><input type="radio" name="gender" value="other"> 其他</label>
  <button type="submit">提交</button>
</form>

支付方式选择

<div class="payment-options">
  <label><input type="radio" name="payment" value="credit"> 借记卡</label>
  <label><input type="radio" name="payment" value="debit"> 贷记卡</label>
  <label><input type="radio" name="payment" value="paypal"> PayPal</label>
</div>

样式设计与增强

通过CSS可以自定义单选框样式：

/* 隐藏默认样式 */
input[type="radio"] {
  display: none;
}
/* 自定义样式 */
.payment-options label {
  display: block;
  margin: 10px 0;
  cursor: pointer;
}
input[type="radio"] + label:before {
  content: "○";
  color: #ccc;
  font-size: 20px;
}
input[type="radio"]:checked + label:before {
  color: #4285f4;
  transform: scale(1.2);
}

JavaScript交互

添加动态行为提升用户体验：

// 获取单选框元素
const radios = document.querySelectorAll('input[type="radio"][name="group1"]');
// 添加事件监听
radios.forEach(radio => {
  radio.addEventListener('change', function() {
    console.log('选择的值：', this.value);
    // 根据选择执行不同操作
  });
});
// 手动设置选中状态
document.getElementById('option3').checked = true;

表单验证

确保用户做出选择：

<form onsubmit="return validateForm()">
  <div class="required">
    <label><input type="radio" name="required" value="yes"> 是</label>
    <label><input type="radio" name="required" value="no"> 否</label>
  </div>
  <button type="submit">提交</button>
</form>
<script>
function validateForm() {
  const selected = document.querySelector('input[name="required"]:checked');
  if (!selected) {
    alert('请选择一项！');
    return false;
  }
  return true;
}
</script>

进阶应用

动态选项加载

// 根据用户选择动态显示内容
const options = document.querySelectorAll('input[name="dynamic"]');
options.forEach(option => {
  option.addEventListener('change', function() {
    document.getElementById('content-' + this.value).style.display = 'block';
  });
});

组合使用其他表单元素

<div class="settings">
  <label><input type="radio" name="theme" value="light" checked> 浅色主题</label>
  <label><input type="radio" name="theme" value="dark"> 深色主题</label>
  <div id="light-theme" style="display:block;">
    <input type="text" placeholder="浅色主题下的输入框">
  </div>
  <div id="dark-theme" style="display:none;">
    <input type="text" placeholder="深色主题下的输入框">
  </div>
</div>

input单选框作为基础表单元素,在用户交互设计中扮演着重要角色，通过本文的介绍，您应该能够：