аюсь добавить функцию onclick, когда пользователь установил флажок, и тогда будет показана общая цена.
Вся информация, включая цену, извлекается из базы данных (нет проблем с получением данных, данные отображаются правильно).
Вот как выглядит код.

//calculate price
function total() {
  var cal = document.getElementsByName('event');
  var total = 0;
  for (var i = 0; i < cal.length; i++) {
    if (cal[i].checked) {
      total += parseFloat(cal[i].getAttribute("data-price"));
    }
  }
}
var checks = document.getElementsByName(event);
for (var i = 0; i < checks.length; i++) checks[i].onclick = total;

<form id="bookingForm" action="javascript:alert('form submitted');" method="get">
		<section id="selectEvent">
			<h2>Select Events</h2>
    <div class ="item">
    <span class="chosen">
   event1 <input type= checkbox name= event data-price = "1" value=eventId1/>
    event2 <input type= checkbox name= event data-price = "2" value=eventId2/>
   </span>
   </div>
		</section>

	

		<section id="checkCost">
			<h2>Total cost</h2>
			Total <input type="text" name="total"  size="10" readonly />
		</section>

	
	</form>

Вот код Java-сценария, просто сосредоточиться на общей функции ()

window.addEventListener('load', initialise);

    function initialise () {
        'use strict';
        //calculate price
        function total(){
        var cal= document.getElementsByName('event[]');
        var total = 0;
        for (var i = 0; i<cal.length; i++){
            if(cal[i].checked){
                total += parseFloat(cal[i].data-price);
            }
        }           
    document.getElementByName("total").value = "$" + total.toFixed(2);
    }

вот ссылка для моей справки

[1]:Показать общую стоимость, когда флажок установлен в JS
Я тоже пытался, но это не работает

total + = parseFloat (cal [i] .getAttribute ("data-price")