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

2026-01-30 20:49:22JavaScript

实现图片选择按钮效果

使用HTML和CSS创建基础的图片选择按钮结构，通过<input type="radio">隐藏原生单选按钮，用<label>关联图片展示。

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

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

基础CSS样式

隐藏原生单选按钮，为图片添加悬停和选中状态样式。

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

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

.image-radio-group label img {
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.image-radio-group label img:hover {
  border-color: #ccc;
}

.image-radio-group input[type="radio"]:checked + label img {
  border-color: #2196F3;
  box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
}

添加交互效果

使用JavaScript增强交互性，例如添加选中动画或动态内容更新。

document.querySelectorAll('.image-radio-group input').forEach(radio => {
  radio.addEventListener('change', function() {
    if (this.checked) {
      console.log('Selected value:', this.value);
      // 可在此添加更多交互逻辑
    }
  });
});

响应式布局优化

通过CSS Grid或Flexbox实现不同屏幕尺寸下的自适应布局。

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

.image-radio-group {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .image-radio-group {
    flex-direction: column;
  }
}

高级样式变体

创建圆形图片选择按钮或添加文字标签的组合样式。

/* 圆形图片样式 */
.image-radio-group.round label img {
  border-radius: 50%;
}

/* 带文字描述的样式 */
.image-radio-group.with-text label {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-radio-group.with-text .option-text {
  margin-top: 8px;
  font-size: 14px;
}

完整示例代码

整合所有元素的完整实现示例。

<!DOCTYPE html>
<html>
<head>
<style>
.image-radio-group {
  display: flex;
  gap: 20px;
  margin: 20px;
}

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

.image-radio-group label {
  cursor: pointer;
}

.image-radio-group label img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 3px solid transparent;
  border-radius: 8px;
  transition: all 0.3s;
}

.image-radio-group label:hover img {
  border-color: #ddd;
}

.image-radio-group input:checked + label img {
  border-color: #4CAF50;
  transform: scale(1.05);
}

.option-text {
  display: block;
  text-align: center;
  margin-top: 8px;
  font-weight: bold;
}
</style>
</head>
<body>

<div class="image-radio-group">
  <input type="radio" id="fruit1" name="fruit" value="apple" checked>
  <label for="fruit1">
    <img src="https://via.placeholder.com/120?text=Apple" alt="Apple">
    <span class="option-text">Apple</span>
  </label>

  <input type="radio" id="fruit2" name="fruit" value="orange">
  <label for="fruit2">
    <img src="https://via.placeholder.com/120?text=Orange" alt="Orange">
    <span class="option-text">Orange</span>
  </label>

  <input type="radio" id="fruit3" name="fruit" value="banana">
  <label for="fruit3">
    <img src="https://via.placeholder.com/120?text=Banana" alt="Banana">
    <span class="option-text">Banana</span>
  </label>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const radios = document.querySelectorAll('.image-radio-group input');
  radios.forEach(radio => {
    radio.addEventListener('change', function() {
      console.log('Selected:', this.value);
    });
  });
});
</script>

</body>
</html>