Показать сообщение отдельно
  #4 (permalink)  
Старый 10.06.2020, 13:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077


... как вариант
<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <img class="image-placeholder" />
    <img class="image-placeholder" />
    <img class="image-placeholder" />
    <label><input type="radio" name="img" checked>ЧБ</label>
    <label><input type="radio" name="img" >Цвет</label>
</body>

<script>
    const images = {
        "0": [
            'https://image.flaticon.com/icons/svg/246/246144.svg',
            'https://image.flaticon.com/icons/svg/1383/1383327.svg',
            'https://image.flaticon.com/icons/svg/324/324084.svg',
        ],
        "1": [
            'https://image.flaticon.com/icons/svg/220/220603.svg',
            'https://image.flaticon.com/icons/png/512/1383/1383260.png',
            'https://image.flaticon.com/icons/png/512/324/324107.png',
        ]
    };
    document.addEventListener('DOMContentLoaded', () => {
        const inputRadios = document.querySelectorAll('input[name="img"]');
        const imagePlaceholders = document.querySelectorAll('img.image-placeholder');
        const onChange = value => () => imagePlaceholders.forEach((imgTag, index) => imgTag.src = images[value][index]);
        inputRadios.forEach((r, i)  => (i = onChange(i), r.addEventListener('change', i), r.checked && i()));
    });
</script>

</html>
Ответить с цитированием