当前位置：首页 > JavaScript

js实现的radio图片选择按钮效果

2026-03-01 11:53:51JavaScript

实现radio图片选择按钮效果

使用JavaScript实现图片作为radio按钮的选择效果，可以通过监听点击事件并动态修改样式来实现。以下是具体实现方法：

HTML结构

创建一组radio输入框和对应的图片标签，将radio隐藏并用图片替代显示：

js实现的radio图片选择按钮效果

<div class="image-radio-group">
  <label>
    <input type="radio" name="option" value="1" class="hidden-radio">
    <img src="image1.jpg" class="radio-image">
  </label>
  <label>
    <input type="radio" name="option" value="2" class="hidden-radio">
    <img src="image2.jpg" class="radio-image">
  </label>
</div>

CSS样式

隐藏原生radio按钮，为图片添加选中和未选中的样式：

.hidden-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-image {
  cursor: pointer;
  border: 2px solid #ddd;
  border-radius: 4px;
  transition: all 0.3s;
}

.radio-image:hover {
  border-color: #aaa;
}

.hidden-radio:checked + .radio-image {
  border-color: #2196F3;
  box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
}

JavaScript交互

添加事件监听器增强交互效果：

js实现的radio图片选择按钮效果

document.querySelectorAll('.hidden-radio').forEach(radio => {
  radio.addEventListener('change', function() {
    // 移除所有图片的选中样式
    document.querySelectorAll('.radio-image').forEach(img => {
      img.classList.remove('active');
    });

    // 为当前选中的图片添加样式
    if (this.checked) {
      this.nextElementSibling.classList.add('active');
    }
  });

  // 初始化选中状态
  if (radio.checked) {
    radio.nextElementSibling.classList.add('active');
  }
});

增强版实现

添加键盘导航和ARIA属性提升可访问性：

document.querySelectorAll('.image-radio-group label').forEach(label => {
  label.setAttribute('tabindex', '0');
  label.setAttribute('role', 'radio');
  label.setAttribute('aria-checked', 'false');

  label.addEventListener('keydown', function(e) {
    if (e.key === ' ' || e.key === 'Enter') {
      e.preventDefault();
      this.querySelector('input').click();
    }
  });
});

document.querySelectorAll('.hidden-radio').forEach(radio => {
  radio.addEventListener('change', function() {
    const label = this.closest('label');
    document.querySelectorAll('.image-radio-group label').forEach(l => {
      l.setAttribute('aria-checked', 'false');
    });
    label.setAttribute('aria-checked', 'true');
  });
});

动画效果

为选中状态添加更丰富的视觉效果：

.radio-image.active {
  transform: scale(1.05);
  filter: drop-shadow(0 0 8px rgba(33, 150, 243, 0.6));
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.radio-image:active {
  animation: pulse 0.3s ease;
}

这种方法创建了完全可访问的图片radio按钮组，支持鼠标和键盘操作，并提供了视觉反馈。可以根据实际需求调整样式和动画效果。