1

Как сделать так, что бы при нажатии на чекбокс поменялась картинка слева:

введите сюда описание изображения

4
  • 6
    Написать код, наверное.
    – user207618
    7 мар 2018 в 11:10
  • Ну или скрывайте текущую/показывайте нужную или img src подменяйте
    – yolosora
    7 мар 2018 в 11:17
  • На чекбокс? Не на радиобаттон, а на чекбокс? Как именно ты это представляешь?
    – Qwertiy
    7 мар 2018 в 11:18
  • @Qwertiy ну может там мульён картинок на все варианты и должна происходить подмена
    – yolosora
    7 мар 2018 в 11:19

4 ответа 4

1
 function k() {
document.getElementById('glavnay').src=(document.getElementById('yslygi').checked)? 
   'img/1.jpg': 'img/krovat.JPG'

}

<img src="img/krovat.JPG" id="glavnay">
<input name="Краска" type="checkbox" onclick="k()" id="yslygi" />

Так у меня получилось

0

Примерный алгоритм таков:

var checkbox = document.querySelector('input[type=checkbox]');    

if (checkbox.checked) {
    replaceImg();
} else {
    setDefaultImg(); 
}

Если я правильно понял, то в зависимости от выбранного checkbox`а будет ставиться определенная картинка. В таком случае, я бы передавал в функцию изображение

replaceImg(img)
1
  • 1
    Спасибо за идеи,буду пробовать!
    – Лиана
    7 мар 2018 в 11:28
0

Используя JQuery.

$(".checkbox1").click(function(){
    $('.some-image-container').html("<img src='new_image.png'>");
});
0

Я бы допустим сделал так. Есть чекбоксы и для каждого прописал бы ссылку так:

<input id="checkBox1" type="checkbox" data-img="тут ссылка">
<input id="checkBox2" type="checkbox" data-img="тут ссылка">
<input id="checkBox3" type="checkbox" data-img="тут ссылка">
<input id="checkBox4" type="checkbox" data-img="тут ссылка">
<input id="checkBox5" type="checkbox" data-img="тут ссылка">
<input id="checkBox6" type="checkbox" data-img="тут ссылка">

Ну и уже при выборе смотрим на ссылку и заменяем. Например на jquery:

$(document).on('change', 'input[type=checkbox]', function() {
    if(this.checked) {
      $(".img").attr('src', $(this).data("img"));
    }
});

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.