0

На форме есть чекбоксы, при нажатии на них меняется картинка слева. Нажимаем "Борт у стены" появляется 1 картинка, жмем "Горизонтальные планки"-2 картинка, а если выбираем "Борт у стены" и "Горизонтальные планки"-3 картинка и тд. Хотелось бы оптимизировать код,потому что чем больше чекбоксов тем сложнее найти нужную комбинацию и можно запутаться при их поиске. Поможет ли массив? Продолжить в jQuery или лучше php? введите сюда описание изображения полный код

$('input').on("click",function(){	

  if($('#Bort').prop('checked') && $('#Gor_planki').prop('checked') && $('#radio').prop('checked')) { 
      $('#image').attr('src','http://ecoskarb.ru/products/img/dvuspalnaj-krovat_200_21.JPG');//борт,горПланки,леваяЛестница
  } 
  else if($('#Bort').prop('checked') && $('#Gor_planki').prop('checked') && $('#radio2').prop('checked')) { 
      $('#image').attr('src','http://ecoskarb.ru/products/img/dvuspalnaj-krovat_200_21.JPG');//борт,горПланки,праваяЛестница
  }
  
  else if($('#Bort').prop('checked') && $('#radio').prop('checked')) { 
      $('#image').attr('src','http://ecoskarb.ru/products/detskaya_mebel/img/detskaja-krovat_600.JPG');//борт,леваяЛестница
  } 
  else if($('#Bort').prop('checked') && $('#radio2').prop('checked')) { 
      $('#image').attr('src','http://ecoskarb.ru/products/detskaya_mebel/img/detskaja-krovat_600.JPG');//борт,праваяЛестница
  } 
    
 else if($('#Gor_planki').prop('checked') && $('#radio').prop('checked')) { 
      $('#image').attr('src','http://ecoskarb.ru/products/img/ecoskarb.ru_iachik_40_750.jpg');//горПланки,леваяЛестница
  } 
  else if($('#Gor_planki').prop('checked') && $('#radio2').prop('checked')) { 
      $('#image').attr('src','http://ecoskarb.ru/products/img/ecoskarb.ru_iachik_40_750.jpg');//горПланки,праваяЛестница
  }
   
//ни один чекбокс не выбран, но переключаем радиокнопки лево,право:  
  else if($('#radio').prop('checked')) { //левый чекбокс
$('#image').attr('src','http://ecoskarb.ru/products/img/ecoskarb.ru_750.jpg');
  }
  else if($('#radio2').prop('checked')) { //правый чекбокс
$('#image').attr('src','http://ecoskarb.ru/products/img/ecoskarb.ru_750.jpg');
  }
  
//если ни один из чекбоксов не выбран:
  else { 
$('#image').attr('src','http://ecoskarb.ru/products/img/ecoskarb.ru_750.jpg');
  }
   
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://ecoskarb.ru/products/detskaya_mebel/img/detskaya_krovat_massiv.JPG" id="image" width="310" height="280" alt="Детская кровать чердак купить в Екатеринбурге" align="left"/></a>
<label for="Bort">Борт у стены</label>1400
<input type="checkbox"  id="Bort" /><br />
<label for="Gor_planki">Горизонтальные планки</label>500
<input  type="checkbox"  id="Gor_planki" /><br />
<input class="kartinki" name="Лестница" type="radio" id="radio" value="слева" checked="checked" />слева<br />
<input class="kartinki" type="radio" name="Лестница" id="radio2" value="справа" />справа

1 ответ 1

0

Во первых, рекомендуется не называть классы/айди/другие сущности транслитом ("kartinki" - пример)

Во вторых, можно сделать все намного проще. И radio button, и checkbox имеют событие change, и у тех, и у других логика одна - отрисовать картинку.

Покажу на примере одного элемента из вопроса.

<input  type="checkbox"  id="Gor_planki" />

В элемент добавим поле, в котором будет хранится картинка, которую он отобразит слева, уберем id (рекомендуется не прибегать к использованию id), добавим общий селектор, по которому выберутся и другие чекбоксы и радио-кнопки (все эти изменения надо будет сделать там то-же):

<input data-action="change-img" data-image-src="http://ecoskarb.ru/products/img/ecoskarb.ru_iachik_40_750.jpg" type="checkbox" />

Так-же, для удобства надо добавить селектор для изображения (что-бы удобнее было выбирать, назовем его data-img-target)

<img data-img-target src="http://ecoskarb.ru/products/ ... />

теперь JS-код будет выглядеть так:

$(function() {
    $("[data-action=\"change-img\"]").on("change", function() {
          if ($(this).prop("checked")) {
              $("[data-img-target]").prop("src", $(this).data("imageSrc"));
          }
    });
});

Это все.

1
  • смысл поняла и сделала тут 2 чекбокса:w3schools.com/code/tryit.asp?filename=FQS0LC31XH1V теперь не могу понять, как мне их соедить при нажатии на оба чекбокса должна быть другая картинка
    – Лиана
    28 апр 2018 в 4:40

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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