Калькулятор с 3 группами радио кнопок

[kirito0709]

Суть вопроса такая: есть 3 группы радиокнопок.

1. При выборе радиокнопки из первой группы в переменную floor должно передаваться значение выбранной радио кнопки.
2. При выборе радиокнопки из первой группы в переменную roof должно передаваться значение выбранной радио кнопки.
3. При выборе радиокнопки из первой группы в переменную constract должно передаваться значение выбранной радио кнопки.

Далее в зависимости от комбинации выбранных радио кнопок в каждой группе
(пример 1: для floor выбрана 2 кнопка, для roof выбрана 4 кнопка, для constract выбрана 3 кнопка
пример 2: для floor выбрана 3 кнопка, для roof выбрана 2 кнопка, для constract выбрана 1 кнопка)

в div#result должна вставляться соотвествующая картинка.

Подскажите как можно сделать данный калькулятор (желательно с комментариями к каждой строке javascript) или в каком направлении копать.

Ссылка на мои попытки https://jsfiddle.net/kirito0709/es648fys/

P.S. с javascript знаком на уровне менять параметры слайдеров по документации.

[рони]

kirito0709,
в чём проблема?

[рони]

kirito0709,

$(function() {
var floor="without_floor",roof="roof_white",constract="constract_silver";
$('#form1').on('click', 'input', function (event) {
  floor = $(this).attr('value');
  console.log(floor); createImg();
  document.getElementById('result1').innerHTML = '(||||   ' + floor + '   ||||) ';
})
$('#form2').on('click', 'input', function (event) {
  roof = $(this).attr('value');
  console.log(roof); createImg();
  document.getElementById('result2').innerHTML = '(||||   ' + roof + '   ||||) ';
})
$('#form3').on('click', 'input', function (event) {
  constract = $(this).attr('value');
  console.log(constract); createImg();
  document.getElementById('result3').innerHTML = '(||||   ' + constract + '   ||||) ';
})

function createImg()
{
   if(floor && roof && constract)  {
       var src = '/'+floor+'/'+roof+'/'+constract +".jpg" ; //уточните путь к картиинке
       var img = $('<img>', {src : src})
       $('#result').html(img)
   }
}
});

[kirito0709]

рони, Спасибо за ответ. Остался 1 вопрос. В зависимости от выбранных чекбоксов меняются картинки. Всего картинок 60 штук. Пути к картинкам заранее известны. Правильно ли делать через switch ? Я взял Ваш код и попытался добавить свои наметки. Вроде работает, но не уверен что то, что я придумал это - лучший вариант.

$(function() {
var floor="without_floor",roof="roof_white",constract="constract_silver";
$('#form1').on('click', 'input', function (event) {
  floor = $(this).attr('value');
  console.log(floor); createImg();
  document.getElementById('result1').innerHTML = '(||||   ' + floor + '   ||||) ';
})
$('#form2').on('click', 'input', function (event) {
  roof = $(this).attr('value');
  console.log(roof); createImg();
  document.getElementById('result2').innerHTML = '(||||   ' + roof + '   ||||) ';
})
$('#form3').on('click', 'input', function (event) {
  constract = $(this).attr('value');
  console.log(constract); createImg();
  document.getElementById('result3').innerHTML = '(||||   ' + constract + '   ||||) ';
})
 
function createImg()
{
   if(floor && roof && constract)  {
   
   var testresult =  (floor + roof + constract);
console.log(testresult);
   switch(testresult) {
  case 'without_floorroof_whiteconstract_silver':
    document.getElementById('result').innerHTML = 'Выбраны все первые пункты, вставляем картинку XXX';
    break

  case 'floor_battenroof_greyconstract_silver':
    document.getElementById('result').innerHTML = 'выбраны все вторые пункты кроме последнего,  вставляем картинку YYY';
    break
    // ... тут еще  около 58 case для разных вариаций выбранных радиокнопок
  default:
    document.getElementById('result').innerHTML = 'Я таких значений не знаю'; // если я правильно понял то default для switch  можно не указывать (или указать картинку по умолчанию. 
}
   
     //  var src = '/'+floor+'/'+roof+'/'+constract +".jpg" ; //уточните путь к картинке
    //   var img = $('<img>', {src : src})
    //   $('#result').html(img)
   }
}
});

[рони]

kirito0709,
сделайте обьект и ненужно больше ничего, или массив и никаких switch не потребуется, да и value в инпутах ненужно будет.

[рони]

kirito0709,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <style type="text/css">

.floor-chechbox{margin-bottom: 15px;}
label.floor-radio{margin-bottom: 0px;}
label.floor-radio input{display:inline-block;}
label.floor-radio input+div.floor-checkbox{
height: 20px;
text-align:left;
display:inline-block;
vertical-align: text-bottom;
padding-left:5px;
}
label.floor-radio input~div.checked-item-text > img{height: 20px;}
label.floor-radio input:checked~div.checked-item-text{color: #cbb892; font-weight:bold;}
label.floor-radio input:checked~div.checked-item-text:before{
  content: '✔ ';
  color:#b1945b;
}
label.floor-radio input:checked~div.floor-checkbox{background:#c4af84;}
label.floor-radio input+div.floor-checkbox {
  width: 15px;
  height: 15px;
  border: 1px solid #b1945b;
  box-sizing: border-box;
  border-radius:50%;
}
label.floor-radio input {display: none;}
.floor-checkbox, .checked-item-text, .checked-item-text span, .checked-item-text img {
   vertical-align: middle;
   display:inline-block;
}







/* цвет тента */
label.roof-color {
  display: inline-block;
  vertical-align: top;
}
label.roof-color input {
  display: none;
}
label.tent-color input#t-color-1+div {
  background: #82a5bb;
}
label.roof-color input+div {
  width: 24px;
  height: 24px;
  text-align: center;
  opacity: 0.8;
  border: 1px solid #000;
  box-sizing: border-box;
}
label.roof-color input:checked+div {
  opacity: 1;
}
label.roof-color input+div i {
  display: none;
  line-height: 24px;
  font-size:18px;
}
label.roof-color input:checked+div i {
  display: block;
  top: -2px;
  position: relative;
}

label.roof-color input+div:hover::before {
  content: attr(data-title);
  position: relative;
  top: -40px;
  left: -100%;
  padding: 5px 10px;
  border: 1px solid #333;
  background: rgba(255,255,230,1);
}
label.roof-color input+div:hover::after {
  content: '';
  display: block;
  position: relative;
  height: 0;
  width: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(0,0,0,.7);
  opacity: 1;
  top: -33px;
  z-index:1;
}
label.roof-color input:checked+div:hover::before {
  top: -40px;
}
label.roof-color input:checked+div:hover::after {
  top: -57px;
}
label.roof-color input:checked+div:hover i {
  top: -18px;
  position: relative;
}

label.constract-color input+div:hover::before {
  content: attr(data-title);
  position: relative;
  top: -40px;
  left: -100%;
  padding: 5px 10px;
  border: 1px solid #333;
  background: rgba(255,255,230,1);
}
label.constract-color input+div:hover::after {
  content: '';
  display: block;
  position: relative;
  height: 0;
  width: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(0,0,0,.7);
  opacity: 1;
  top: -33px;
  z-index:1;
}
label.constract-color input:checked+div:hover::before {
  top: -40px;
}
label.constract-color input:checked+div:hover::after {
  top: -57px;
}
label.constract-color input:checked+div:hover i {
  top: -18px;
  position: relative;
}
label.roof-color input#t-color-1+div {
  background: #82a5bb;
}
label.roof-color input#t-color-2+div {
  background: #14af39;
}
label.roof-color input#t-color-3+div {
  background: #0138af;
}
label.roof-color input#t-color-4+div {
  background: #babfa8;
}
label.roof-color input#t-color-5+div {
  background: #ffffff;
}

label.constract-color {
  display: inline-block;
  vertical-align: top;
}
label.constract-color input {
  display: none;
}
label.constract-color input#c-color-1+div {
  background: #c0c0c0;
}
label.constract-color input#c-color-2+div {
  background: #ffffff;
}
label.constract-color input#c-color-3+div {
  background: #000000;
}
label.constract-color input+div {
  width: 24px;
  height: 24px;
  text-align: center;
  opacity: 0.9;
  border: 1px solid #000;
  box-sizing: border-box;
}
label.constract-color input:checked+div {
  opacity: 1;
}
label.constract-color input+div i {
  display: none;
  line-height: 24px;
  font-size:18px;
}
label.constract-color input:checked+div i {
  display: block;
  top: -2px;
  position: relative;
}
label.constract-color input#c-color-3:checked+div i, label.tent-color input#t-color-3:checked+div i {
  color: #fff;
}


.text-color-for-roof,
.text-color-for-constract {
 padding-bottom:5px;
}
.block-roof-color {
border-right:1px solid #000;
}
/* //строки текста и цвета */
  </style>

  <title> by kirito0709</title>






<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
    var b = [0, 0, 0],
        d = [15, 3, 1];
    $("#form1, #form2, #form3").each(function(e, c) {
        var f = $("input", c);
        $(c).on("click", "input", function(a) {
            a = f.index(this);
            b[e] = a;
            a = b.reduce(function(a, b, c) {
                return a + b * d[c]
            }, 0);
            $("#result").html(++a + ' картинка')
        })
    })
});
</script>


</head>

<body>

<div id="form1" class="floor-chechbox row">

  <div class="col-md-12">
    <label class="floor-radio">
      <input id="fr" name="floorprice" value="without_floor" type="radio" checked />
      <div class="floor-checkbox"></div>
      <div class="checked-item-text">коробка без пола</div>
    </label>
  </div>
  <div class="col-md-12">
    <label class="floor-radio">
      <input id="zr" name="floorprice" value="floor_batten" type="radio"/>
      <div class="floor-checkbox"></div>
      <div class="checked-item-text">коробка с полом из половой доски</div>
    </label>
  </div>
  <div class="col-md-12">
    <label class="floor-radio">
      <input id="sr" name="floorprice" value="floor_dsp" type="radio"/>
      <div class="floor-checkbox"></div>
      <div class="checked-item-text">коробка с полом из фанеры </div>
    </label>
  </div>
  <div class="col-md-12">
    <label class="floor-radio">
      <input id="tr" name="floorprice" value="floor_dpk" type="radio"/>
      <div class="floor-checkbox"></div>
      <div class="checked-item-text">
        <span>коробка с полом из ДПК</span>
      </div>
    </label>
  </div>

</div>


<div class="check-color">
<div class="row">
  <div class="col-xs-6 block-roof-color">
    <div class="text-color-for-roof">
    <b>Цвет крыши:</b>
    </div>
    <div id="form2" class="color-for-roof">

      <label class="roof-color">
        <input id="t-color-5" name="roofcolor" value="roof_white" type="radio" checked />
        <div data-title="Белый"><i>✔</i></div>
      </label>
      <label class="roof-color">
        <input id="t-color-1" name="roofcolor" value="roof_grey" type="radio" />
        <div data-title="Серый"><i>✔</i></div>
      </label>
      <label class="roof-color">
        <input id="t-color-2" name="roofcolor" value="roof_green" type="radio" />
        <div data-title="Зеленый"><i>✔</i></div>
      </label>
      <label class="roof-color">
        <input id="t-color-3" name="roofcolor" value="roof_blue" type="radio" />
        <div data-title="Синий"><i>✔</i></div>
      </label>
      <label class="roof-color">
        <input id="t-color-4" name="roofcolor" value="roof_beige" type="radio" />
        <div data-title="Бежевый"><i>✔</i></div>
      </label>

    </div>
  </div>

  <div class="col-xs-6">
    <div class="text-color-for-constract">
    <b>Цвет стенок:</b>
    </div>
    <div id="form3" class="color-for-constract">

      <label class="constract-color">
        <input id="c-color-1" name="constractcolor" value="constract_silver" type="radio" checked />
        <div data-title="Серебрянный"><i>✔</i></div>
      </label>
      <label class="constract-color">
        <input id="c-color-2" name="constractcolor" value="constract_white" type="radio" />
        <div data-title="Белый"><i>✔</i></div>
      </label>
      <label class="constract-color">
        <input id="c-color-3" name="constractcolor" value="constract_black" type="radio" />
        <div data-title="Черный"><i>✔</i></div>
      </label>

    </div>
  </div>
</div>
</div>
<p><span id="result1"></span> <span id="result2"></span><span id="result3"></span></p>
<div style="border:1px solid #000;height:100px; width:100px;" id="result">1 картинка</div>

</body>

</html>

[kirito0709]

рони, cпасибо за уделенное время и ваше терпение. Увидел на сколько сильно у меня было неправильное мышление. Попытался с помощью справочника и учебника на данном сайте разобраться с вашим примером, но до конца не понял. Написал комментарии, но для части кода не смог этого сделать.

$(function() { //объявляем функцию
    var b = [0, 0, 0], //объявляем переменную в виде массива (не понял почему именно такие числа)
        d = [15, 3, 1]; //объявляем переменную в виде массива (не понял почему именно такие числа)
    $("#form1, #form2, #form3").each(function(e, c) { //здесь для каждого блока с указанными id объявляем функцмию с 2мя параметрами
        var f = $("input", c); //объявляем переменную f которая высчитывается по функции с параметрами input и c (не понял что за параметры)
        $(c).on("click", "input", function(a) { // 
            a = f.index(this); //видимо передаем в переменную "а" индекс кликнутой кнопки
            b[e] = a; //это я не понял
            a = b.reduce(function(a, b, c) { //передаем для каждого ранее определенного индекса массива его соотвествующее значение (более точно не могу понять это действие)
                return a + b * d[c] // возвращаем что-то. Что именно я не понял, а именно d[c] не понял
            }, 0); // не понял что за ноль()
            $("#result").html(++a + ' картинка') //тут увеличиваем значение "а"  на 1 и записываем полученное значение в переменную "а" и добавляем слово картинка
        })
    })
});

И еще вопрос. Я изначально выкладывал не весь код. Думал что сразу пойму что и как делать, но последний код с массивами меня, честно говоря, немного пришиб((.

И так я пытаюсь сделать такой калькурятор:



На скриншоте, код js прописан только для радио кнопок которые круглые. на объединении групп радиокнопок я застопорился. Тобишь на скрине картинки меняются только при переключении кнопок для пола.

Красным - выделены картинки которые у меня менялись. THUMB это миниатюра галлереи. На картинке не видно, но при нажатии на большую картинку PREVIEW , открывается детальная картинка DETAIL на весь экран.
Синим - выделен текст который я надеюсь потом превратить в вывод цены в зависимости от выбранных кнопок.

Картинки вставлял по клику на input

var img_nofloor_detail = "<?=$arResult['FLOOR_GALLERY']['0']['DETAIL']['SRC'];?>"
var img_floor_batten_detail = "<?=$arResult['FLOOR_GALLERY']['1']['DETAIL']['SRC'];?>"
var img_floor_dsp_detail = "<?=$arResult['FLOOR_GALLERY']['2']['DETAIL']['SRC'];?>"
var img_floor_dpk_detail = "<?=$arResult['FLOOR_GALLERY']['3']['DETAIL']['SRC'];?>"

var img_nofloor_thumb = "<?=$arResult['FLOOR_GALLERY']['0']['THUMB']['src'];?>"
var img_floor_batten_thumb = "<?=$arResult['FLOOR_GALLERY']['1']['THUMB']['src'];?>"
var img_floor_dsp_thumb = "<?=$arResult['FLOOR_GALLERY']['2']['THUMB']['src'];?>"
var img_floor_dpk_thumb = "<?=$arResult['FLOOR_GALLERY']['3']['THUMB']['src'];?>"

var img_nofloor_preview = "<?=$arResult['FLOOR_GALLERY']['0']['PREVIEW']['src'];?>"
var img_floor_batten_preview = "<?=$arResult['FLOOR_GALLERY']['1']['PREVIEW']['src'];?>"
var img_floor_dsp_preview = "<?=$arResult['FLOOR_GALLERY']['2']['PREVIEW']['src'];?>"
var img_floor_dpk_preview = "<?=$arResult['FLOOR_GALLERY']['3']['PREVIEW']['src'];?>"
//переменные могу передавать из пхп пока только так. хотя возможно смогу загрузить картинки в один массив так чтобы они стояли в нужном порядке и потом попытаться передать массив из пхп в js и создать ассоциативный массив где  для каждой ++a будет свой элемент массива сожержащий пути к картинкам
window.onload = function() {
$("#fr").click(function(){
document.getElementById('text_result').innerHTML = basetext;
document.querySelector('#slider>.flex-viewport>ul>li>a>img').src = img_nofloor_preview;
document.querySelector('#slider>.flex-viewport>ul>li>a').href = img_nofloor_detail;
document.querySelector('#carousel>.flex-viewport>ul>li>img').src = img_nofloor_thumb;
});

$("#zr").click(function(){
document.getElementById('text_result').innerHTML = batten;
document.querySelector('#slider>.flex-viewport>ul>li>a>img').src = img_floor_batten_preview;
document.querySelector('#slider>.flex-viewport>ul>li>a').href = img_floor_batten_detail;
document.querySelector('#carousel>.flex-viewport>ul>li>img').src = img_floor_batten_thumb;
});

$("#sr").click(function(){
document.getElementById('text_result').innerHTML = dsp;
document.querySelector('#slider>.flex-viewport>ul>li>a>img').src = img_floor_dsp_preview;
document.querySelector('#slider>.flex-viewport>ul>li>a').href = img_floor_dsp_detail;
document.querySelector('#carousel>.flex-viewport>ul>li>img').src = img_floor_dsp_thumb;
});
$("#tr").click(function(){
document.getElementById('text_result').innerHTML = dpk;
document.querySelector('#slider>.flex-viewport>ul>li>a>img').src = img_floor_dpk_preview;
document.querySelector('#slider>.flex-viewport>ul>li>a').href = img_floor_dpk_detail;
document.querySelector('#carousel>.flex-viewport>ul>li>img').src = img_floor_dpk_thumb;
});
}

Переменные могу передавать из пхп пока только так. хотя возможно смогу загрузить картинки в один массив так чтобы они стояли в нужном порядке и потом попытаться передать массив из пхп в js и создать ассоциативный массив где для каждой ++a будет свой элемент массива содержащий пути к картинкам.....


Глядя на ваш пример выше,

$("#result").html(++a + ' картинка')

Я не могу понять как мне для каждого варианта выбранных радио кнопок вставить подмену картинок.

[рони]

Я не могу понять как мне для каждого варианта выбранных радио кнопок вставить подмену картинок.

var arr = ['1.jpg','2.jpg'...,'60.jpg']
$("#result").html('<img src="'+arr[a]+'">')

[kirito0709]

рони, Благодарю. Получилось сделать то что я хотел, создав 3 массива с путями для картинок. Сейчас наткнулся на сайте на многомерные массивы и попробую c многомерным массивом сделать тоже самое.

[kirito0709]

Все круто. Все работает. Благодарю еще раз сенсея Рони Однако я так и не смог до конца понять логику скрипта.

$(function() { //объявляем функцию
    var b = [0, 0, 0], //объявляем переменную в виде массива (не понял почему именно такие числа) (вроде как нулевые  элементы массива каждой из трех групп радиокнопок)
        d = [15, 3, 1]; //объявляем переменную в виде массива (не понял почему именно такие числа)
    $("#form1, #form2, #form3").each(function(e, c) { //здесь для каждого блока с указанными id объявляем функцмию с 2мя параметрами (переменная "е" это видимо индекс элемента массива в котором хранятся id  div-ов с радиокнопками  )
        var f = $("input", c); //объявляем переменную f которая высчитывается по функции с параметрами input и c (видимо с это родительский блок в котором лежит кликнутый input)
        $(c).on("click", "input", function(a) { //
            a = f.index(this); //видимо передаем в переменную "а" индекс кликнутой кнопки
            b[e] = a; //это я не понял(вроде берем из массива b элемент с индексом e)
            a = b.reduce(function(a, b, c) { //передаем для каждого ранее определенного индекса массива его соотвествующее значение (более точно не могу понять это действие)
                return a + b * d[c] // возвращаем что-то. Что именно я не понял, а именно d[c] не понял
            }, 0);
            $("#result").html(++a + ' картинка') //тут увеличиваем значение "а"  на 1 и записываем полученное значение в переменную "а" и добавляем слово картинка
        })
    })
});

В общем я почитал за эти 3 дня учебник js, вылавливая моменты указанные в данном скрипте. Попытался выстроить логику скрипта, чтобы потом смочь повторить его самостоятельно, но у меня не получилось. Если кому-то будет не лень, прошу объяснить мне непонятные мне моменты в данном скрипте.