Showing Radio Button calculations in total box?

Question

How could I make it so if a user clicks the radio button with the data-price of 5.99 then the price will show up in the total box but if the user clicks the "no charge" radio button then nothing will show up

var radio = document.querySelector("input[name=deliveryType]");
for (var i = 0; i < radio.length; i++) {

  if (radio.checked) {
    l_totalPrice += parseFloat(radio.dataset.price);
  }
}
total.value = l_totalPrice;

<section id="collection">
  <h2>Collection method</h2>
  <p>Please select whether you want your chosen event ticket(s) to be delivered to your home address (a charge applies for this) or whether you want to collect them yourself.</p>
  <p>
    Home address - &pound;5.99 <input type="radio" name="deliveryType" value="home" data-price="5.99" checked>&nbsp; | &nbsp; Collect from ticket office - no charge <input type="radio" name="deliveryType" value="ticketOffice" data-price="0">
  </p>
</section>

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

Answer 1

Using event delegation and the dataset API, this is easy:

let total = document.querySelector("input[name='total']");

// Set the event listener up on an ancestor of both radio buttons
document.getElementById("collection").addEventListener("click", function(event){
  // When the event is triggered here, check the event.target to see what element
  // actually triggered the event. 
  if(event.target.value === "home"){
    // Use the dataset API to access the data-* attribute.
    total.value = event.target.dataset.price;
  } else {
    total.value = "";
  }
  
});

#collection h1, #checkCost h1 { font-size:1.9em; }

<section id="collection">
  <h1>Collection method</h1>
  <p>Please select whether you want your chosen event ticket(s) to be delivered to your home address (a charge applies for this) or whether you want to collect them yourself.</p>
  <p>
    Home address - &pound;5.99 
    <input type="radio" name="deliveryType" value="home" data-price="5.99" checked>&nbsp; | &nbsp; 
    Collect from ticket office - no charge 
    <input type="radio" name="deliveryType" value="ticketOffice" data-price="0">
  </p>
</section>

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

FYI: The first heading element within a section should always be an h1. If you don't want that font-size, just modify it with CSS. Never use an HTML element because of the default styling that a browser applies to it.

Answer 2

Here you go

function updateTotal(ele) {
 document.getElementById("total").value = ele.value;
}

<input type="radio" id="home" value="5.99" name="delivery_type" onchange="updateTotal(this)"/> 
<label for="home">Home address - <b>&pound;5.99</b></label>
<br>
<input type="radio" id="office" value="0" name="delivery_type" onchange="updateTotal(this)"/> 
<label for="office">Collect from ticket office - <b>no charge</b></label>
<br>
<br>
<input type="number" id="total" name="total" placeholder="Choose a delivery address" readonly/>

---

Let me know if you have any confusions :)