Calculate sum of radio buttons in sections with jQuery

Question

I have radio buttons in sections and I want to total up the number of "Yes" selections in each section as well as a grand total of all sections.

Here is my html:

<div class="toggle_container">
    <div class="block">

        <div class="form_line form_line_border">
        <label class="form_label_left">Question 1</label>
                <div class="form_input">
                <input type="radio" class="form_radio calc" id="input1_yes" name="q1" value="Yes" />
                <label for="input1_yes">Yes</label>

                <input type="radio" class="form_radio" id="input1_no" name="q1" value="No" />
                <label for="input1_no">No</label>
                </div>
        </div>

        <div class="form_line form_line_border">
        <label class="form_label_left">Question 2</label>
            <div class="form_input">
                <input type="radio" class="form_radio calc" id="input2_yes" name="q2" value="Yes" />
                <label for="input2_yes">Yes</label>

                <input type="radio" class="form_radio" id="input2_no" name="q2" value="No" />
                <label for="input2_no">No</label>
                </div>
        </div>

        <div class="form_line">
            <div class="form_input">
                <input type="text" name="sum_1" class="scorebox" readonly>
                </div>
        </div>

        </div>
</div>

<div class="toggle_container">
    <div class="block">

        <div class="form_line form_line_border">
        <label class="form_label_left">Question 3</label>
                <div class="form_input">
                <input type="radio" class="form_radio calc" id="input3_yes" name="q3" value="Yes" />
                <label for="input3_yes">Yes</label>

                <input type="radio" class="form_radio" id="input3_no" name="q3" value="No" />
                <label for="input3_no">No</label>
                </div>
        </div>

        <div class="form_line form_line_border">
        <label class="form_label_left">Question 4</label>
            <div class="form_input">
                <input type="radio" class="form_radio calc" id="input4_yes" name="q4" value="Yes" />
                <label for="input4_yes">Yes</label>

                <input type="radio" class="form_radio" id="input4_no" name="q4" value="No" />
                <label for="input4_no">No</label>
                </div>
        </div>

        <div class="form_line">
            <div class="form_input">
                <input type="text" name="sum_2" class="scorebox" readonly>
                </div>
        </div>

        </div>
</div>

<div id="grand_total">
    <div class="block">

        <div class="form_line form_line_border">
        <label class="form_label_left">Grand Total</label>
                <div class="form_input">
                <input type="text" class="scorebox" id="grand_total" name="grand_total" />
                </div>
        </div>
    </div>
</div>

And here is the script:

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
function calcscore(){
    var score = 0;
    $(".calc:checked").each(function(){
            score+=1;
    });
    $("input[name=sum]").val(score)
}
$().ready(function(){
    $(".calc").change(function(){
        calcscore()
    });
});

});//]]>  
</script>

How do I get the totals to add up by section? At the moment, all inputs with name "sum" increase in value.

Answer 1

Try this:

var $blocks = $('.toggle_container').children('.block');
$blocks.find('input:radio').change(function () {
    var total = 0;
    $blocks.each(function() {
        var $block = $(this),
            score = $block.find('.calc:checked').length;
        $block.find('.scorebox').val(score);
        total += score;
    });
   $('#grand_total').find('.scorebox').val(total);
}).first().change();

jsfiddle

Answer 2

var score = $("input[type=radio][value=Yes]:checked").length;

Answer 3

Like this?

$("input[type=radio][value=Yes]:checked").each(function(){
        score+=1;
});