test check box form values
10
20
30
40

Things in BLUE text are required for the form.

Things in GREEN text are "comments" that are not used in the code, except for the JavaScript.

Things in RED text are the variables you can change.

You may copy the code below and use it for your form, changing the variables as necessary.

<html>
<!-- ///////////////////////////////////////////////////////
Tutorial Created by the UWP Web Development Team
Visit the Web Training Center
http://www.uwplatt.edu/web/wtc/
/////////////////////////////////////////////////////// -->
 <head>
<title>
Check Box Functionality
</title>
<script type="text/javascript">
<!-- Start Hide

function getValue()
{
//////////////////////////////////////////////////////////////
// The variable 'msg' will hold the messages we want to
// appear in the message box.
//////////////////////////////////////////////////////////////
var msg = "";

//////////////////////////////////////////////////////////////
// checkSum will keep track of the sums of all fields selected
//////////////////////////////////////////////////////////////
var checkSum = 0;
var test1 = document.testForm.test1.checked;
var test2 = document.testForm.test2.checked;
var test3 = document.testForm.test3.checked;
var test4 = document.testForm.test4.checked;

if (test1)
{
//////////////////////////////////////////////////////////////
// This If statement adds all of the selected fields together
// in the checkSum variable
//////////////////////////////////////////////////////////////

   msg += "Test 1: " + (document.testForm.test1.value) + "\n";
   checkSum += parseFloat(document.testForm.test1.value);
}
else
{
   msg += "Test 1: Not Checked.\n";
}
if (test2)
{
   msg += "Test 2: " + (document.testForm.test2.value) + "\n";
   checkSum += parseFloat(document.testForm.test2.value);
}
else
{
   msg += "Test 2: Not Checked.\n";
}
if (test3)
{
   msg += "Test 3: " + (document.testForm.test3.value) + "\n";
   checkSum += parseFloat(document.testForm.test3.value);
}
else
{
   msg += "Test 3: Not Checked.\n";
}
if (test4)
{
   msg += "Test 4: " + (document.testForm.test4.value) + "\n";
   checkSum += parseFloat(document.testForm.test4.value);
}
else
{
   msg += "Test 4: Not Checked.\n";
}
msg += "Total of Checked: " + checkSum;
//////////////////////////////////////////////////////////////
// Here we print out an alert box
//////////////////////////////////////////////////////////////
alert (msg);

}

// End Hide -->
 </script>

</head>
<body>

<div class="tableLight" style="width:35%;margin:0 auto;padding:0.5em;border:0.2em solid #000;">
   <strong>test check box form values</strong>
   <form name="testForm" alt="">
      <input type="checkbox" name="test1" value="10" />10<br />
      <input type="checkbox" name="test2" value="20" />20<br />
      <input type="checkbox" name="test3" value="30" />30<br />
      <input type="checkbox" name="test4" value="40" />40<br />
      <input type="submit" value="check values" onclick="javascript:getValue();" />
      <input type="reset" value="reset" />
   </form>
</div>

</body>
</html>