На форме есть чекбоксы, при нажатии на них меняется картинка слева. Нажимаем "Борт у стены" появляется 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="справа" />справа