如何实现单选按钮选中时修改其父div的背景色？

没问题！我帮你搞定这个需求——当单选按钮被选中时，给它所在的div加上背景色。下面是完整的实现方案，包含HTML结构、jQuery代码，还有实用的优化技巧：

1. 基础HTML结构 #

先搭好包含单选按钮的容器结构，给每个容器加一个统一的类名（比如.radio-container），方便后续用jQuery定位：

<div class="radio-container">
  <input type="radio" name="option" id="option1" value="1">
  <label for="option1">选项 1</label>
</div>
<div class="radio-container">
  <input type="radio" name="option" id="option2" value="2">
  <label for="option2">选项 2</label>
</div>
<div class="radio-container">
  <input type="radio" name="option" id="option3" value="3">
  <label for="option3">选项 3</label>
</div>

2. jQuery核心逻辑实现 #

接下来写jQuery代码，监听单选按钮的状态变化，然后修改对应div的背景色：

// 确保DOM加载完成后再执行代码
$(document).ready(function() {
  // 监听所有单选按钮的change事件（选中状态变化时触发）
  $('input[type="radio"]').on('change', function() {
    // 先重置所有容器的背景色，避免多个div同时高亮
    $('.radio-container').css('background-color', 'transparent');
    // 给当前选中的单选按钮所在的div设置背景色
    $(this).closest('.radio-container').css('background-color', '#e3f2fd');
  });
});

关键代码说明 #

• $(document).ready()：保证页面所有DOM元素加载完成后再绑定事件，避免出现找不到元素的问题。
• $('input[type="radio"]').on('change', ...)：不管用户是点击单选按钮本身还是对应的标签，都会触发这个事件，覆盖所有交互场景。
• $(this).closest('.radio-container')：精准定位当前选中按钮的父级容器，哪怕你的HTML结构嵌套更深，也能准确找到目标div。

3. 更优方案：用CSS类控制样式（推荐） #

直接用JS修改样式不够灵活，更好的做法是把样式写在CSS里，通过添加/移除类来控制高亮状态，这样样式和逻辑分离，后续修改更方便：

首先添加CSS样式：

.radio-container {
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 8px;
  transition: background-color 0.2s ease;
  cursor: pointer;
}
/* 选中状态的样式 */
.radio-container.selected {
  background-color: #e3f2fd;
  border: 1px solid #2196f3;
}

然后修改jQuery代码：

$(document).ready(function() {
  // 监听单选按钮变化事件
  $('input[type="radio"]').on('change', function() {
    // 移除所有容器的选中类
    $('.radio-container').removeClass('selected');
    // 给当前选中的容器添加选中类
    $(this).closest('.radio-container').addClass('selected');
  });

  // 页面加载时，如果有默认选中的单选按钮，自动高亮对应的div
  $('input[type="radio"]:checked').closest('.radio-container').addClass('selected');
});

这个方案还额外处理了页面加载时默认选中的单选按钮，一打开页面就能看到对应的高亮效果，体验更完善~

内容的提问来源于stack exchange，提问作者MariaL