The problem is that the IDs and names of your elements are the same as global functions. Element IDs also become global variables that refer to the elements, and these are replacing the function definitions. Give the functions different names.
JS:
function appleAlert() {
var selection = document.getElementById("apple");
var total = 0;
if (selection.checked) {
total = 59;
alert(total);
} else {
alert("Not checked");
}
}
HTML:
<form name="shopping" action="#" method="post" onsubmit="return appleAlert()">
<input type="checkbox" name="apple" id="apple" onclick="appleAlert()" />
<label for="apple">Apple ($.59)</label>
<input type="checkbox" name="orange" id="apple" onchange="orangeAlert()" />
<label for="orange">Orange ($.49)</label>
<input type="checkbox" name="banana" id="apple" onchange="bananaAlert()" />
<label for="banana">Banana ($.39)</label>
<input type="submit" value="Submit">
</form>