Here's what I'm ultimately trying to do. Create a gradebook for a course that has the content organized by unit (Unit 1, Unit 2, etc.).

PHP will echo out all of the data from the database that has two parts: Pts. Earned and Total Pts. The grade would be a simple calculation of Pts. Earned Total Pts. I would like two things at the end of this...

1.) I want the user to be able to check/uncheck boxes on each gradebook entry to see how their final grade would be different with/without that grade entry.

2.) I want the user to be able to see their total grade for each unit (as well as an overall grade) AND have the check/uncheck functionality for that unit that I mentioned in #1.


Example:

UNIT 1
Assign. 1-1: 10 / 10
Assign. 1-2: 3 / 10
Assign. 1-3: 12 / 20
-------------------
UNIT 1 Grade: 62.6%


UNIT 2
Assign. 2-1: 5 / 5
Assign. 2-2: 9 / 10
Assign. 2-3: 40 / 50
-------------------
UNIT 2 Grade: 83%


TOTAL GRADE: 79 / 105 = 75.2%



Then if the user unchecked assign. 1-2 their Unit 1 Grade would become 22/30 = 73.3% and their Total Grade would become 76 / 95 = 80%



Current code I'm playing around with...
HTML Code:
<!DOCTYPE html>
<html>
<body>

<form>
<input id="pts_earned_1" onclick="clickCh(this)" type="checkbox" value="10"> 10  / <input id="total_pts_1" type="hidden" value="12">12<br> 
<input id="pts_earned_2" onclick="clickCh(this)" type="checkbox" value="12"> 12.5  / <input id="total_pts_2" type="hidden" value="14">14<br>
<br>
<input id="pts_earned_total" type="hidden" value="0">
<input id="total_pts" type="hidden" value="0">
<div id="pts_earned_display">Pts. Earned:</div>
</form>

<script type="text/javascript">
function clickCh(caller) {

  var pts_earned = document.getElementById("pts_earned_total").value*1;
  if(caller.checked){ pts_earned += caller.value*1; }
               else { pts_earned -= caller.value*1; }
  document.getElementById('pts_earned_total').value = pts_earned;
  document.getElementById('pts_earned_display').innerHTML
    = 'Pts. Earned: '+pts_earned.toFixed(2)+'<p>Grade: '+Math.round((pts_earned/total_pts)*100*10)/10+'%</p>';
}
</script>
</body>
</html>

I'm thinking of having the clickCh function add/subtract the values of the "total_pts" input id's and then define a variable called total_pts, but I don't know how to do that since those values aren't in the input tag that's being checked.

Any ideas on this one? BTW, I'm not married to any of the above code, so feel free to hack away at it.

Thanks!