Как при выборе checkbox заменить картинку которая располагается перед ними?

Question

[Алексей Абакумов]

Всем добрый день, есть два инпута, типа чекбокс. Как сделать так, что бы при выборе, изображение перед ними менялось. Псевдоклассы уже заняты, анимацией самих чекбоксов.

<div class="inputs__steni">
      <img src="@img/icons/Icon-plitka.svg" alt="Icon-plitka" class="inputs__img">
      <img src="@img/icons/icon-kraska.svg" alt="kraska" class="inputs__img" style="display: none;">
      <div class="inputs__inputs">
        <label class="inputs__label">
          <input type="radio" class="inputs__input" value="Плитка" checked name="input_change">
          <div class="inputs__box">
            <div class="inputs__name">Обои</div>
          </div>
        </label>
        <label class="inputs__label">
          <input type="radio" class="inputs__input" value="Краска" name="input_change">
          <div class="inputs__box">
            <div class="inputs__name">Краска</div>
          </div>
        </label>
      </div>
    </div>

Comments

[Lara B]

Можно расположить картинки после инпутов и выбирать картинку через сложный селектор +
в зависимости от того, который checked и дисплей у картинки менять

[Алексей Абакумов]

Lara B, Привет, спасибо за ответ, а можешь пример написать, я так понимаю что тут и без JS можно?

[Алексей Абакумов]

Lara B, реализовал так:

const input = document.querySelectorAll('.inputs__input')
const img = document.querySelectorAll('.inputs__img')

input.forEach((elem)=>{
  
  elem.onchange = function handleChange(checkbox) {
    for(let i = 0; i <input.length; i++){
        if(input[i].checked == true){
                img[i].style.display = 'block';
        }else{
            img[i].style.display = 'none';
        }
      }
  }

})

мало ли вам пригодится)