Autosum checkbox in li tags?? please help

Hi,

Im stuck and need help.

What im trying to do is to get this code

<input type="checkbox" id='game0' value="9.99"  onclick="UpdateCost()">Game 1 ( 9.99)<br>
<input type="checkbox" id='game1' value="19.99" onclick="UpdateCost()">Game 2 (19.99)<br>
<input type="checkbox" id='game2' value="27.50" onclick="UpdateCost()">Game 3 (27.50)<br>
<input type="checkbox" id='game3' value="45.65" onclick="UpdateCost()">Game 4 (45.65)<br>
<input type="checkbox" id='game4' value="87.20" onclick="UpdateCost()">Game 5 (87.20)<br>
<input type="text" id="totalcost" value="">

Code (markup):

to work in a

<ul>
<li>  </li>
<li>  </li>
<li>  </li>
<li>  </li>
</ul>

Code (markup):

tag

the js file looks like this

function UpdateCost() {
  var sum = 0;
  var gn, elem;
  for (i=0; i<5; i++) {
    gn = 'game'+i;
    elem = document.getElementById(gn);
    if (elem.checked == true) { sum += Number(elem.value); }
  }
  document.getElementById('totalcost').value = sum.toFixed(2);
} 

Code (markup):

I tried to do it this way

<ul>
<li><input type="checkbox" id='game0' value="9.99"  onclick="UpdateCost()">Game 1 ( 9.99)<br></li>
<li><input type="checkbox" id='game1' value="19.99" onclick="UpdateCost()">Game 2 (19.99)<br></li>
<li><input type="checkbox" id='game2' value="27.50" onclick="UpdateCost()">Game 3 (27.50)<br></li>
<li><input type="checkbox" id='game3' value="45.65" onclick="UpdateCost()">Game 4 (45.65)<br></li>
<li><input type="checkbox" id='game4' value="87.20" onclick="UpdateCost()">Game 5 (87.20)<br></li>
</ul>

<ul>
<li><input type="text" id="totalcost" value=""></li>
</ul>

Code (markup):

but of course it didnt work



Any1 out there that can help me to solve this please..

 

there must be someone out there that surely knows anything about Javascript