Как сделать добавление к сумме выбранного checkbox?

Question

[bazliiii]

Добрый вечер, хочу сделать что бы при выборе checkbox его value добавлялось в какую-то переменную и выводило в html block

Вывод в блок с id result, по стандарту цена 100000, а дальше +value
Вот код html:

<div class="booking-calc__box">
                                        <label class="form-control">
                                            <input type="checkbox" name="channelcost" class="booking-calc__checkbox" value="10000"
                                                onClick="add(this);">
                                            <span class="booking-calc__cheked"></span>
                                            <span class="booking-calc__text">Скраб из натуральных ингридиентов</span>
                                            <div class="booking-calc__sum-box">10 000 HUF</div>
                                        </label>
                                        <label class="form-control">
                                            <input type="checkbox" name="channelcost" class="booking-calc__checkbox" value="10000"
                                                onClick="add(this);">
                                            <span class="booking-calc__cheked"></span>
                                            <span class="booking-calc__text">Прогрев вениками</span>
                                            <div class="booking-calc__sum-box">10 000 HUF</div>
                                        </label>
                                        <label class="form-control">
                                            <input type="checkbox" name="channelcost" class="booking-calc__checkbox" value="8000"
                                                onClick="add(this);">
                                            <span class="booking-calc__cheked"></span>
                                            <span class="booking-calc__text">Мыльный массаж березовым веником</span>
                                            <div class="booking-calc__sum-box">8 000 HUF</div>
                                        </label>
                                        <label class="form-control">
                                            <input type="checkbox" name="channelcost" class="booking-calc__checkbox" value="10000"
                                                onClick="add(this);">
                                            <span class="booking-calc__cheked"></span>
                                            <span class="booking-calc__text">Арома парение веером</span>
                                            <div class="booking-calc__sum-box">10 000 HUF</div>
                                        </label>
                                        <label class="form-control">
                                            <input type="checkbox" name="channelcost" class="booking-calc__checkbox" value="10000"
                                                onClick="add(this);">
                                            <span class="booking-calc__cheked"></span>
                                            <span class="booking-calc__text">Теплая ванночка для ног</span>
                                            <div class="booking-calc__sum-box">10 000 HUF</div>
                                        </label>
                                    </div>

<div class="booking-calc__result"><span id="result"></span> <span>HUF</span></div>

Comments

[0xD34F]

было

[bazliiii]

0xD34F, Спасибо что отметили

Answer 1

[Alex Bernadotte]

в джаваскрипт:

let sum = 0

function add(val){
  if(val.checked){
     sum+= parseInt(val.value);
  } else {
    sum-= parseInt(val.value);
  }  
  document.getElementById('result')=sum;
}

или

function add(val){
  let sum = parseInt(document.getElementById('result'));
  if(val.checked){
     sum+= parseInt(val.value);
  } else {
    sum-= parseInt(val.value);
  }  
  document.getElementById('result')=sum;
}

Comments

[nonconformiste]

тут не учитывается что может быть выбрано несколько опций.

[Alex Bernadotte]

nonconformiste, Я не понимаю твои вопрос. Да работает так потому что onClick="add(this);" всегда добавляет или вычитает соответствующее значение.