2

При выборе определенного чекбокса в поле 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>

1 ответ 1

2

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>

2
  • Код работает, огромное спасибо. Правда я не совсем понял как
    – Juzo
    12 мая 2018 в 13:16
  • @Juzo Пожалуйста. Читайте про функции, которые Вам неизвестны, и спрашивайте, что непонятно. Успехов!
    – user176262
    12 мая 2018 в 13:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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