マークアップ
<input class=questionaire id="question1" type=checkbox value=1>Question 1<br>
<input class=questionaire id="question2" type=checkbox value=2>Question 2<br>
<input class=questionaire id="question3" type=checkbox value=3>Question 3<br>
<input class=questionaire id="question4" type=checkbox value=2>Question 4<br>
<input class=questionaire id="question5" type=checkbox value=1>Question 5<br>
<input class=questionaire id="question6" type=checkbox value=1>Question 6<br>
<input class=questionaire id="question7" type=checkbox value=3>Question 7<br>
<input class=questionaire id="question8" type=checkbox value=2>Question 8<br>
<input class=questionaire id="question9" type=checkbox value=5>Question 9<br>
<div id=message>
The color of this changes as the score gets higher, 0 is black, <8 is blue, >8 is red.
</div>
JavaScript
$('.questionaire').change(function () {
//sum it up
var sum = 0;
$('.questionaire:checked').each(function (index) {
sum = sum + parseFloat($(this).val());
});
if (sum == 0) {
$('#message').attr('style', 'color:black');
}
if (sum < 8 and sum > 0) {
$('#message').attr('style', 'color:blue');
}
if (sum > 8) {
$('#message').attr('style', 'color:red');
}
});