On the form there are checkboxes, when you click on them, the picture on the left changes. Click "Board near the wall" 1 picture appears, click "Horizontal bars" -2 picture, and if you select "Board near the wall" and "Horizontal bars" -3 pictures and so on. I would like to optimize the code, because the more checkboxes, the harder it is to find the right combination and you can get confused when searching for them. Will the array help? Continue in jQuery or better php? enter image description here full code

$('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 answer 1

    Firstly, it is recommended not to call classes / ids / other entities as translit ("kartinki" is an example)

    Secondly, you can make everything much easier. Both the radio button and the checkbox have a change event, and those and others have one logic - to draw a picture.

    I will show an example of one element from the question.

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

    Add a field to the element in which the picture will be stored, which it will display on the left, remove the id (it is recommended not to use id), add a general selector that will select other checkboxes and radio buttons (all these changes will need to be done there). -zhe):

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

    Also, for convenience, you need to add a selector for the image (so that it would be more convenient to choose, let's call it data-img-target)

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

    Now the JS code will look like this:

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

    It's all.