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

【问题标题】：Can I style a image based off of radio button state?我可以根据单选按钮状态设置图像样式吗？
【发布时间】：2019-04-01 16:00:52
【问题描述】：

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

我的网络应用中有三张图片，下面有一个相应的单选按钮。我想要它，所以当一个单选按钮状态为真时，选择显示它的特定标准的相应图像样式，而其他两个图像默认转到那里。有没有办法做到这一点。

这是我的布局：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;

有什么办法吗？？？？

【问题讨论】：

stackoverflow.com/questions/38906020/…的可能重复

标签： javascript css html

【解决方案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>

【讨论】：

【解决方案2】：

您最初可以为所有img 分配一个类.img-radio .img-def：

<img src="images/1 month.jpeg" class="img-radio img-def" alt="" id="button1" />
<img src="images/6 month.jpeg" class="img-radio img-def" alt="" id="button6" />
<img src="images/12 month.jpeg" class="img-radio img-def" alt="" id="button12" />

<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>

.img-radio 类将是一个有用的常量类，我们可以使用它选择与单选按钮对应的所有 imgs。

然后您可以将“默认样式”分配给 img-def 类并在 CSS 中为 img-selected 类指定样式：

.img-def {
  border-radius: 5px;
  border: 2px solid #ccc;
  width: 150px;
  border: 2px solid #ccc;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s; 
}
.img-selected {
  border-radius: 5px;
  border: 4px solid #02C5FB;
  width: 205px;
}

最后，您可以定义函数styleImage 以获取img 的id 字符串并将img 的类更改为.img-radio .img-selected 并将其他img 的类更改为.img-radio .img-def ：

function styleImage(id){
  var imgs = document.querySelectorAll('.img-radio')
  for(var i=0; i<imgs.length < i++){
    if(imgs[i].id === id){
      imgs[i].className = "img-radio img-selected"
    }
    else imgs[i].className = "img-radio img-def"
  }
}

【讨论】：