根据产品复选框创建价格总计表

Question

我正在创建一个购物车页面，其左侧是每个产品的复选框，用于更新表格中的行以显示当前价格。需要注意的是，因为我已经在使用另一段javascript的输入值，所以我不能根据标记进行总结。我有这个代码，但它不起作用，我无法说明原因：

<input type="checkbox" name="chk" value="29.99" onclick="calculate()">Product 1<br />
<input type="checkbox" name="chk" value="29.99" onclick="calculate()">Product 2<br />
<input type="checkbox" name="chk" value="29.99" onclick="calculate()">Product 3<br />
<input type="checkbox" name="chk" value="29.99" onclick="calculate()">Product 4<br />
Total Price : $<div id="divid" style="color:red;"></div>

这是javascript：

function calculate() {
var el, i = 0;
var total = 0;
while(el = document.getElementsByName("chk")[i++]) {
if(el.checked) { total= total + Number(el.value);}
}
var div = document.getElementById('divid');
div.innerHTML = "Total : " +total ;
};

这是正确的方向吗？如果没有，我该怎么做？

这是我的Jsfiddle：https://jsfiddle.net/f7hv00hf/