組默認選中在總費用顯示值不使用「值」

Question

我們可以直接將值設置爲我們在文本框中想要像
<input type="text" name="total" value="500" size="10" readonly />
值是否有任何顯示默認文本檢查值的方法沒有使用value =「500」的盒子？

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

<form id= selectEvent> 
 
<section id="collection"> 
 
\t \t \t 
 
\t \t \t <p> 
 
\t \t \t Home - &pound;500.00 <input type="radio" name="deliveryType" value="home" data-price="500.00" checked />&nbsp; | &nbsp; 
 
\t \t \t self collect - no charge <input type="radio" name="deliveryType" value="ticketOffice" data-price="0" /> 
 
\t \t \t </p> 
 
\t \t </section> 
 
    
 
    <section id="checkCost"> 
 
\t \t \t <h2>Total cost</h2> 
 
\t \t \t Total <input type="text" name="total" size="10" readonly /> 
 
\t \t </section> 
 
    </form>

Answer 1

嘗試以下代碼：

var checks = document.getElementsByName('deliveryType'); 
 
checks.forEach(function(value){ 
 
    if(value.checked){ 
 
     document.getElementsByName("total")[0].value = "$" + value.getAttribute('data-price'); 
 
    } 
 
}) 
 
for (var i = 0; i < checks.length; i++) checks[i].onclick = function() { 
 
    var cal = document.getElementsByName('deliveryType'); 
 
    var total = 0; 
 
    for (var i = 0; i < cal.length; i++) { 
 
    if (cal[i].checked) { 
 
     total += parseFloat(cal[i].getAttribute("data-price")); 
 
    } 
 
    } 
 
    document.getElementsByName("total")[0].value = "$" + total.toFixed(2); 
 
    
 
}

<form id= selectEvent> 
 
    <section id="collection">  
 
     <p> 
 
     Home - &pound;500.00 <input type="radio" name="deliveryType" value="home" data-price="500.00" checked />&nbsp; | &nbsp; 
 
     self collect - 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> 
 
</form>