选中该单选框选项后，如何编辑链接到 jQuery 单选框的图像？

Question

我正在使用 jQuery 单选框创建问卷，单选框中的每个选项都有一个相应的图像链接，这样可以单击该图像来选择该单选框选项。我还使用 javascript 和 css 使单选框在视觉上响应点击：如果您选择一个图像，则所选图像底部的单选框圆圈以绿色勾勒，然后所有其他未选中的单选框圆圈以红色标出（见下图）。最终我计划使用“input {visibility:hidden;}隐藏圆形无线电输入。我的问题是我希望红色和绿色轮廓出现在链接图像周围，但我不知道如何改变整个图像而不仅仅是微小的单选框圆圈。（另外，请忽略图像，这些只是暂时让我的造型更容易，所以我可以看看它会是什么样子。）

这就是我的 HTML、CSS 和 JS 现在的样子：

$('input:radio[name=movie]').change(function() {
  const unCheckedInputs = $('input:radio[name=movie]').not(":checked");
  unCheckedInputs.addClass('inputRemoved');
  $(this).removeClass('inputRemoved');
});

.answers input:checked {
  transition: all 0.5s;
  outline: 10px solid rgb(72, 151, 52); //green
}

.inputRemoved {
  transition: all 0.5s;
  outline: 10px solid rgb(158, 47, 47); //red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="answers">

    <label> //answer 1
        <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>

    <label> //answer 2
        <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>

    <label> //answer 3
        <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>

下面两张截图是点击中间图片前后页面的样子。我对“之后”的目标是在第二张图片周围有绿色轮廓，在第一张和第三张图片周围有红色轮廓（而不是在下面的圆形单选框周围，它们将被隐藏）。非常感谢您的提前帮助！

点击中间图片前的页面

点击中间图片后的页面

我尝试用

替换上面的JS

  $('.radioElement').change(function() {
    $(this)
      .removeClass('inputRemoved')
      .siblings()
      .addClass('inputRemoved')
  });

无论出于何种原因，都会在所选图像周围出现轮廓，但无论何时选择新图像，轮廓都不会消失，而未选择的图像也不会勾勒出轮廓，所以我又回到了另一个 JS。我还尝试编写我的 CSS，以便在添加“inputRemoved”时更改我的 .image 类，但实际上没有成功使该方法起作用。

Answer 1

无需使用js代码
只需使用 CSS。

const myForm = document.querySelector('#my-form');

// disable form submitting == page reload on submit
myForm.onsubmit = e => e.preventDefault(); 


myForm.oninput = () => 
  {
  myForm.classList.toggle('Activ', myForm.imgSelect.value !== '');
  };                                   //  ^-- use child name 

label { 
  display : inline-block;
  margin  : 10px;
  }
label input[type="radio"] {
  display : none; 
  }
label input[type="radio"] + img {
  border  : 5px solid transparent;
  }
#my-form.Activ label input[type="radio"] + img {
  border-color : lightcoral;
  }
#my-form.Activ label input[type="radio"]:checked + img {
  border-color : green;
  }

<form id="my-form">
  <label>
    <input type="radio" name="imgSelect" value="img_A">
    <img src="https://picsum.photos/100/150?random=1">
  </label>
  <label>
    <input type="radio" name="imgSelect" value="img_B">
    <img src="https://picsum.photos/100/150?random=2">
  </label>
  <label>
    <input type="radio" name="imgSelect" value="img_C">
    <img src="https://picsum.photos/100/150?random=3">
  </label>
</form>