Вывести определенную информацию в textarea

284

15 мая 2018, 18:00

При выборе определенного чекбокса в поле textarea должна вписываться определенная информация. Допустим я выбрал базовую комплектацию + коврики + диски.

В поле с тестом должно вписываться каждый их выбранных элементов и его цена. Потом все цены должны суммироваться и выдавать полную стоимость выбранного комплекта.

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

function check() { 
  var base = document.getElementById('base'); 
  var mat = document.getElementById('mat'); 
  var crank = document.getElementById('crank'); 
  var tires = document.getElementById('tires'); 
  var disks = document.getElementById('disks'); 
 
  var arr = ['ffff' 
    base, mat, crank, tires, disks 
  ]; 
  var newArr = arr.filter(callback); 
 
  var baseValue = 2000000; 
  var matValue = 3000; 
  var crankValue = 5000; 
  var tiresValue = 20000; 
  var disksValue = 5000; 
 
} 
 
function callback(arr) { 
  return arr.checked == true; 
}

<div class="container"> 
  <form name="carshop"> 
    <h2>Комплектация автомобиля</h2> 
 
    <div class="wrapper"> 
      <div class="checkboxes"> 
        <label><input type="checkbox" id="base" value="2000000" checked disabled>Базовая комплектация</label> 
        <label><input type="checkbox" id="mat" value="3000">Коврики</label> 
        <label><input type="checkbox" id="crank" value="5000">Защита картера</label> 
        <label><input type="checkbox" id="tires" value="20000">Зимние шины</label> 
        <label><input type="checkbox" id="disks" value="5000">Литые диски</label> 
      </div> 
      <div class="image"></div> 
    </div> 
 
    <div class="calculation"> 
      <label>Цена:<textarea id="text"></textarea></label> 
    </div> 
    <div class="buttons"> 
      <input class="button" type="button" value="Рассчитать" onclick="check()"> 
    </div> 
 
  </form> 
</div>

Answer 1

function check() { 
  var text = ""; 
  var value = 0; 
 
  var options = document.querySelectorAll('.wrapper .checkboxes label'); 
  for (var i = 0; i < options.length; i++) { 
    var check = options[i].querySelector("input"); 
    if (check.checked) { 
      value += +check.value; 
      text += options[i].innerText + " - " + check.value + "\n"; 
    } 
  } 
 
  var memo = document.getElementById('text'); 
  memo.value = text + "\n" + "Total - " + value; 
}

textarea { 
  width: 300px; 
  height: 100px; 
}

<div class="wrapper"> 
  <div class="checkboxes"> 
    <label><input type="checkbox" id="base" value="2000000" checked disabled>Базовая комплектация</label><br> 
    <label><input type="checkbox" id="mat" value="3000">Коврики</label><br> 
    <label><input type="checkbox" id="crank" value="5000">Защита картера</label><br> 
    <label><input type="checkbox" id="tires" value="20000">Зимние шины</label><br> 
    <label><input type="checkbox" id="disks" value="5000">Литые диски</label> 
  </div> 
  <div class="image"></div> 
</div> 
 
<div class="calculation"> 
  <label>Цена:<textarea id="text"></textarea></label> 
</div> 
<div class="buttons"> 
  <input class="button" type="button" value="Рассчитать" onclick="check()"> 
</div>