问使用Javascript/JQuery在整个表单中添加值

EN

<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>

$('.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');
    }

});

// Attach a change event listener to all radio buttons on the page
// This means that when you click a radio button then it will go into the function(){} code
$(document).on('change', 'input[type="radio"]', function(){ // this nifty code says that "anytime a radio button is clicked in the scope of the document then fire off this function" If you plan on dynamically adding radio buttons then make sure to use this format

    //woot, we're in!

    //spit out the value of the changed radio button
    console.log($(this).val()); //or this.value

    // console.log(); is gonna be your very best friend :)
});