Меняем картинку чекбоксами

149
11 марта 2018, 21:51

Есть главная картинка 1.png и 2 чекбокса. При нажатии на 1 чекбокс меняется главная картинка на 2.png, если выбираем оба чекбокса меняется на 3.png

<img src="img/1.png" width="310" height="280" id="glavnay" />
<input name="Краска" type="checkbox"  id="yslygi" />
<input name="Лак" type="checkbox"   id="lak" />

 var f=document.getElementById("glavnay").value;
    switch ($('input[type=checkbox]').click()) {
        case "yslygi" : replaceImg (f, "img/2.png");
        case "yslygi" || "lak" : replaceImg (f, "img/3.png");
    }

Видимо что-то пишу не так,не работает...

Answer 1

Как-то так можно сделать:

$('input[type="checkbox"]').click(function(){ 
  if($('#yslygi').prop('checked') && $('#lak').prop('checked')) { //если выбраны оба чекбокса... 
      $('img').attr('src','http://vkusnosti.org/uploads/posts/2013-06/1371657136_jagodnij-pirog.jpg'); 
  }  
  else if($('#yslygi').prop('checked')) { //если выбран первый чекбокс... 
$('img').attr('src','http://i1.smotra.ru/data/img/galleries/7184/7656/sm_img-41896_980x600.jpg'); 
  } 
  else { //если ни один из чекбоксов не выбран 
  	$('img').attr('src','http://enolivier.com/img/frozen-fruit-smoothie/_fullsize/inspirational-frozen-smoothie-fruit-drink-shake-smoothie-shakes_frozen-fruit-smoothie.jpg'); 
  } 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<img src="http://enolivier.com/img/frozen-fruit-smoothie/_fullsize/inspirational-frozen-smoothie-fruit-drink-shake-smoothie-shakes_frozen-fruit-smoothie.jpg" width="310" height="280" id="glavnay" /> 
<input name="Краска" type="checkbox"  id="yslygi" /> 
<input name="Лак" type="checkbox"  id="lak" />

READ ALSO
Автоматически поставить ссылку
HTML

Автоматически поставить ссылку

У меня есть список новостейЯ хочу, чтобы ссылка в тексте новости автоматически обозначалась между тегами

 190
Загрузка нескольких фото PHP
HTML

Загрузка нескольких фото PHP

Ситуация такая, могу загружать по одному фото, но потребовалось сделать загрузку нескольких, решил написать отдельную функцию, но что то запуталсяКод...

 193
добавление данных в базу [дубликат]
HTML

добавление данных в базу [дубликат]

На данный вопрос уже ответили:

 185
Как наложить на фото эффект в CSS, и забрать эту картинку с этим же эффектом?
HTML

Как наложить на фото эффект в CSS, и забрать эту картинку с этим же эффектом?

Если я применяю -webkit-filter: grayscale(100%); картинка будет с фильтром только в рамках сайтаМожно ли, допустим скачивать эту картинку с этим же эффектом?...

 197