рони, ыыы
дубль три )
<!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" value="0" checked>ЧБ</label>
<label><input type="radio" name="img" value="1">Цвет</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 radios = document.querySelectorAll('input[type="radio"][name="img"]');
const placeholders = document.querySelectorAll('img.image-placeholder');
const onChange = ({ target: { value = 0 } = {} } = {}) => placeholders.forEach((p, i) => p.src = images[value][i]);
radios.forEach(r => r.addEventListener('change', onChange));
onChange();
});
</script>
</html>
<!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" value="0" checked>ЧБ</label>
<label><input type="radio" name="img" value="1">Цвет</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 placeholders = document.querySelectorAll('img.image-placeholder');
const onChange = ({ target: { value = 0 } = {} } = {}) => placeholders.forEach((p, i) => p.src = images[value][i]);
document.querySelectorAll('input[type="radio"][name="img"]').forEach(r => r.addEventListener('change', onChange))
onChange()
});
</script>
</html>