Calculate sum of selected radio values to animate a bar graph
<p>I have a set of 5 questions with yes/no radio buttons. The no buttons have a value of 0 while the yes buttons have a value of 20 (representing 20%, so 5 x yes answers = 100%).</p>

<pre><code>&lt;div id="test-questions"&gt;
&lt;p&gt;Question 1
  &lt;input type="radio" id="r1" name="Set1" value="0" /&gt;&lt;label for="r1"&gt; No&lt;/label&gt;&lt;br&gt;
  &lt;input type="radio" id="r2" name="Set1" value="20" /&gt;&lt;label for="r2"&gt; Yes&lt;/label&gt;
&lt;/p&gt;
&lt;p&gt;Question 2
  &lt;input type="radio" id="r3" name="Set2" value="0" /&gt;&lt;label for="r3"&gt; No&lt;/label&gt;&lt;br&gt;
  &lt;input type="radio" id="r4" name="Set2" value="20" /&gt;&lt;label for="r4"&gt; Yes&lt;/label&gt;
&lt;/p&gt;
&lt;p&gt;Question 3
  &lt;input type="radio" id="r5" name="Set3" value="0" /&gt;&lt;label for="r5"&gt; No&lt;/label&gt;&lt;br&gt;
  &lt;input type="radio" id="r6" name="Set3" value="20" /&gt;&lt;label for="r6"&gt; Yes&lt;/label&gt;
&lt;/p&gt;
&lt;p&gt;Question 4
  &lt;input type="radio" id="r7" name="Set4" value="0" /&gt;&lt;label for="r7"&gt; No&lt;/label&gt;&lt;br&gt;
  &lt;input type="radio" id="r8" name="Set4" value="20" /&gt;&lt;label for="r8"&gt; Yes&lt;/label&gt;
&lt;/p&gt;
&lt;p&gt;Question 5
  &lt;input type="radio" id="r9" name="Set5" value="0" /&gt;&lt;label for="r9"&gt; No&lt;/label&gt;&lt;br&gt;
  &lt;input type="radio" id="r10" name="Set5" value="20" /&gt;&lt;label for="r10"&gt; Yes&lt;/label&gt;
&lt;/p&gt;
&lt;p&gt;&lt;input id="total" type="hidden" name="total" value="" /&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>I have the following script to calculate the total:</p>

<pre><code>function setRadios(){
function sumRadios(){
    var total = 0, i = 1, oForm = this.form;
    while (radgrp = oForm.elements['Set' + (i++)]){
        j = radgrp.length;
        do
            if (radgrp[--j].checked){
                total += Number(radgrp[j].value);
                break;
            }
        while (j);
    }
    oForm.elements.total.value = total.toFixed(2);
}

var i = 0, input, inputs = document.getElementById('test-questions').getElementsByTagName('input');
while (input = inputs.item(i++))
    if (input.name.match(/^Set\d+$/))
        input.onclick = sumRadios;
}
onload = setRadios;
</code></pre>

<p>This all works correctly (although if you have a more elegant solution please feel free to say so) but what I want to do now is to change out a graphic based on what the total was, so if the total is '20' then display div1, if it's '40' display div2 and so on. The idea is to animate a bar graph ie 0%, 20%, 40%, 60% 80% or 100%.</p>

<p>I've never worked with jQuery before so be kind to me :)</p>
