如何在选中jQuery单选框选项时修改关联图片的样式？

要把红绿边框应用到关联图片上，你可以通过给单选框的父级<label>添加状态类，再通过CSS选择器控制图片样式，同时隐藏单选框。具体实现如下：

步骤1：修改JavaScript逻辑 #

不再给input加类，而是给对应的label添加选中/未选中类，这样能更方便地控制内部图片的样式：

$('input:radio[name=movie]').change(function() {
  // 重置所有label的状态类
  $('.answers label').removeClass('selected not-selected');
  // 给当前选中项的父label添加选中类
  $(this).closest('label').addClass('selected');
  // 给所有未选中项的父label添加未选中类
  $('input:radio[name=movie]:not(:checked)').closest('label').addClass('not-selected');
});

步骤2：调整CSS样式 #

隐藏单选框，并通过label的状态类给图片设置边框：

/* 隐藏单选框，用绝对定位移出视口，避免影响布局 */
.radioElement {
  position: absolute;
  left: -9999px;
}

/* 选中状态的图片绿色边框 */
.answers label.selected .image img {
  transition: all 0.5s;
  outline: 10px solid rgb(72, 151, 52);
}

/* 未选中状态的图片红色边框 */
.answers label.not-selected .image img {
  transition: all 0.5s;
  outline: 10px solid rgb(158, 47, 47);
}

/* 可选：给图片添加初始样式，确保过渡效果平滑 */
.answers .image img {
  display: block;
  transition: all 0.5s;
}

步骤3：优化HTML（可选） #

把HTML中的JS注释改为HTML注释，避免语法错误：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="answers">
    <!-- answer 1 -->
    <label>
        <div class="image">
            <img src="https://m.media-amazon.com/images/W/IMAGERENDERING_521856-T1/images/I/61CsXp-qnnL.jpg" />    
        </div>
        <input type="radio" name="movie" value="horror" class="radioElement"/>
    </label>

    <!-- answer 2 -->
    <label>
        <div class="image">
            <img src="https://cdn.shopify.com/s/files/1/0057/3728/3618/products/a39764b3dd2055b6cd783ec77bcab5eb_3cc8ea63-bb5e-4759-bb2b-5b08e2cf3d6c_grande.jpg?v=1573585473" />
        </div>
        <input type="radio" name="movie" value="romance" class="radioElement"/>
    </label>

    <!-- answer 3 -->
    <label>
        <div class="image">
            <img src="https://www.lucasfilm.com/app/uploads/IJ1-IA-241_R-480x711.jpg" />
        </div>
        <input type="radio" name="movie" value="action" class="radioElement"/>
    </label>
</div>

为什么之前的方法失效？ #

你之前尝试给input的兄弟元素加类，但.image是input的前序兄弟，且切换时没有重置所有元素的状态，导致样式残留。而通过父label统一管理状态类，能确保每次切换时都重置所有元素的样式，再重新赋值，彻底避免残留问题。

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