Можно ли стилизовать изображение на основе состояния переключателя?

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

Вы можете изначально присвоить класс .img-radio .img-def всем img:

<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 будет полезным классом констант, с помощью которого мы можем выбрать все img s.которые соответствуют переключателю.

Затем можно назначить «стиль по умолчанию» для класса img-def и указать стиль для класса img-selected в CSS:

.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 и изменить класс 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"
  }
}

Answer 2

Следующий скрипт возьмет все идентификаторы изображений и, выполнив функцию, добавит «активные» вызовы к изображению, удаляя его из других.

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>