javascript - 我可以根据单选按钮状态设置图像样式吗？

Question

我想根据单选按钮状态设置图像样式。

我的网络应用程序中有三张图片，下面有一个相应的单选按钮。我想要它，所以当一个单选按钮状态为真时，显示它的特定标准的相应图像样式被选中，另外两个图像默认设置。有什么办法可以做到这一点。

这是我的布局:HTML

<img src="images/1 month.jpeg" alt="" id="button1" onclick="m1-plan()" />
<img src="images/6 month.jpeg" alt="" id="button6" onclick="m6-plan()"/>
<img src="images/12 month.jpeg" alt="" id="button12" onclick="m12-plan()"/>

<div>
    <input type="radio" id="plan1" name="plan" onclick="plan1()" checked>
     <input type="radio" id="plan2" name="plan" onclick="plan2()">
     <input type="radio" id="plan3" name="plan" onclick="plan3()"><br>
   </div>

这就是我希望图像默认的样子:CSS

        border-radius: 5px;
        border: 2px solid #ccc;
        width: 150px;
        border: 2px solid #ccc;
        transition: 0.3s;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s; 

这就是我想要选择的图像:CSS

     border-radius: 5px;
     border: 4px solid #02C5FB;
     width: 205px;

有什么办法吗？？？？？

Answer 1

以下脚本将获取图像的所有 ID，并通过执行函数将“事件”调用添加到图像，同时将其从其他图像中删除。

const allImageIds = ['button1', 'button6', 'button12'];

const styleImage = selectedImageId => {
  allImageIds.forEach(imgId => {
    document.getElementById(imgId).classList.remove('active');
  });
  const image = document.getElementById(selectedImageId);
  image.classList.add('active')
}

在 HTML 中放置以下 onClick 调用:

<div>
  <input type="radio" id="plan1" name="plan" onclick="styleImage('button1')" checked>
  <input type="radio" id="plan2" name="plan" onclick="styleImage('button6')">
  <input type="radio" id="plan3" name="plan" onclick="styleImage('button12')"><br>
</div>