JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

HTML

<p>Home address - &pound;4.99
    <input type="radio" name="deliveryType" value="home" title="4.99" checked="checked" />&nbsp; | &nbsp; Collect from warehouse - no charge
    <input type="radio" name="deliveryType" value="trade" title="0" />
</p>
<section id="checkCost">
    
<h2>Total cost</h2>
Total
    <input type="text" name="total" id="total" size="10" readonly="readonly" />
</section>

JavaScript

var checkedRadioButtons = document.querySelectorAll('[name="deliveryType"]:checked');

document.getElementById("total").value = checkedRadioButtons[0].getAttribute("title");

var radioButtons = document.getElementsByName("deliveryType");

for (var b in radioButtons) {
    radioButtons.item(b).onclick = function () {
        var checkedRadioButtons = document.querySelectorAll('[name="deliveryType"]:checked');

        document.getElementById("total").value = checkedRadioButtons[0].getAttribute("title");

    }
}