Связать картинки с checkbox

388
08 марта 2018, 09:53

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

Answer 1

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

var checkbox = document.querySelector('input[type=checkbox]');    
if (checkbox.checked) {
    replaceImg();
} else {
    setDefaultImg(); 
}

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

replaceImg(img)
Answer 2

Используя JQuery.

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

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

<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"));
    }
});
READ ALSO
php скрипт отправка писем через smtp

php скрипт отправка писем через smtp

Здравствуйте коллегиПроблема заключается в неработающем скрипте по отправке из форм обратной связи на сайте, домен которого закреплён на masterhost

220
Почему разваливается адаптив?

Почему разваливается адаптив?

Сайт : http://окнавтулерф

239
Кнопка поверх изображения-ссылки

Кнопка поверх изображения-ссылки

У меня есть картинка, которая является ссылкойНужно добавить поверх этой картинки кнопку так, чтобы ссылка-картинка не потеряла своей функциональности,...

232