h5单选实现

2026-03-06 14:53:55HTML

实现H5单选功能的方法

在H5中实现单选功能，通常可以通过HTML的<input type="radio">标签结合CSS和JavaScript来完成。以下是几种常见的实现方式：

使用原生HTML单选按钮

<form>
  <input type="radio" id="option1" name="options" value="option1">
  <label for="option1">选项1</label><br>
  <input type="radio" id="option2" name="options" value="option2">
  <label for="option2">选项2</label><br>
  <input type="radio" id="option3" name="options" value="option3">
  <label for="option3">选项3</label>
</form>

将type设置为radio表示单选按钮。
name属性相同的单选按钮会被视为同一组，确保只能选择其中一个。
value属性表示选中时提交的值。
label标签的for属性与input的id绑定，点击标签也能选中按钮。

自定义样式单选按钮

原生单选按钮样式有限，可以通过CSS自定义样式：

<style>
  .radio-container {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    cursor: pointer;
  }
  .radio-container input {
    position: absolute;
    opacity: 0;
  }
  .radio-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #eee;
    border-radius: 50%;
  }
  .radio-container:hover input ~ .radio-checkmark {
    background-color: #ccc;
  }
  .radio-container input:checked ~ .radio-checkmark {
    background-color: #2196F3;
  }
  .radio-checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  .radio-container input:checked ~ .radio-checkmark:after {
    display: block;
  }
  .radio-container .radio-checkmark:after {
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
  }
</style>

<form>
  <label class="radio-container">选项1
    <input type="radio" name="custom-radio" checked>
    <span class="radio-checkmark"></span>
  </label>
  <label class="radio-container">选项2
    <input type="radio" name="custom-radio">
    <span class="radio-checkmark"></span>
  </label>
</form>

隐藏原生input，使用span模拟单选按钮样式。
通过:checked伪类改变选中状态样式。
:after伪元素添加选中时的中心圆点。

使用JavaScript增强交互

如果需要动态获取或设置单选按钮的值：

<form id="radioForm">
  <input type="radio" id="jsOption1" name="jsOptions" value="1">
  <label for="jsOption1">选项A</label>
  <input type="radio" id="jsOption2" name="jsOptions" value="2">
  <label for="jsOption2">选项B</label>
</form>

<script>
  const form = document.getElementById('radioForm');

  // 获取选中的值
  form.addEventListener('change', function() {
    const selectedValue = document.querySelector('input[name="jsOptions"]:checked').value;
    console.log('选中值:', selectedValue);
  });

  // 设置选中状态
  document.getElementById('jsOption2').checked = true;
</script>