当前位置：首页 > JavaScript

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

2026-04-04 12:38:48JavaScript

实现思路

通过CSS和JavaScript结合，将传统的radio按钮隐藏，用自定义的图片样式替代。当用户点击图片时，通过JavaScript切换radio的选中状态，并更新图片样式以反映选中状态。

HTML结构

创建一组radio按钮，每个radio对应一个label标签包裹的图片。利用label的for属性关联radio，实现点击图片即可选中radio的效果。

<div class="radio-image-group">
  <input type="radio" id="option1" name="radioGroup" value="1" checked>
  <label for="option1">
    <img src="image1.jpg" alt="Option 1">
  </label>

  <input type="radio" id="option2" name="radioGroup" value="2">
  <label for="option2">
    <img src="image2.jpg" alt="Option 2">
  </label>

  <input type="radio" id="option3" name="radioGroup" value="3">
  <label for="option3">
    <img src="image3.jpg" alt="Option 3">
  </label>
</div>

CSS样式

隐藏原生radio按钮，为图片添加选中和未选中的样式。通过相邻兄弟选择器（+）实现选中状态的样式切换。

.radio-image-group input[type="radio"] {
  display: none;
}

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

.radio-image-group input[type="radio"]:checked + label img {
  border: 2px solid #4285f4;
  box-shadow: 0 0 8px rgba(66, 133, 244, 0.5);
}

JavaScript交互

添加事件监听器，实现更复杂的交互效果，例如动态添加选中标记或动画效果。

document.querySelectorAll('.radio-image-group input[type="radio"]').forEach(radio => {
  radio.addEventListener('change', function() {
    // 移除所有图片的选中样式
    document.querySelectorAll('.radio-image-group label img').forEach(img => {
      img.classList.remove('selected');
    });

    // 为当前选中的图片添加样式
    if (this.checked) {
      const label = this.nextElementSibling;
      label.querySelector('img').classList.add('selected');
    }
  });
});

进阶效果

实现鼠标悬停效果和更丰富的选中状态指示。

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

.radio-image-group label:hover img {
  opacity: 0.8;
  transform: scale(1.02);
}

.radio-image-group .selected::after {
  content: "✓";
  position: absolute;
  top: 5px;
  right: 5px;
  color: white;
  background: #4285f4;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}