How do I summarize the total number of radio button selection values (Letters, and not numbers)?

Question

I would like to be able to have my form selection choices (radio buttons) added up at the end of a questionnaire in a HTML form, to give me a summary of all the answers with a total number displayed per choice. In other words, there are 10 questions, each with a possible answer of A, B, C or D. At the end of the form, I would like the user to be able to see how many A's they answered, how many B's etc.

Here is what I've been able to put together so far...

<input name="Q1" type="radio" value="A" />A.
<input name="Q1" type="radio" value="B" />B. 
<input name="Q1" type="radio" value="C" />C. 
<input name="Q1" type="radio" value="D" />D.

<input name="Q2" type="radio" value="A" />A.
<input name="Q2" type="radio" value="B" />B. 
<input name="Q2" type="radio" value="C" />C. 
<input name="Q2" type="radio" value="D" />D.

My Script:

$(document).ready(function() {
$("#radio_submit").click(function (e) {
var checked_Q1_radio = $('input:radio[name=Q1]:checked').val();
var checked_Q2_radio = $('input:radio[name=Q2]:checked').val();

if(checked_Q1_radio===undefined || checked_Q2_radio===undefined)
    {
        alert('Please answer all the questions');
    }else{
        alert('Question 1. - "' +checked_Q1_radio + '"'+'Question 2. - "'   
    +checked_Q2_radio + '"');
    }
   });
});   

This gives me an alert window, and shows a summary of my answers, which is ok.

But I still can't figure out how to display the total of the different choices as I described above - because the research I've done has only lead me to examples where number values are added up, which won't work in my case. Am I looking at the problem from the wrong angle?

If it's not possible, how could I then:

1. Separate (line break) the 2 results in my alert message? What will work instead of the '+'? I have tried '\n' and '%n' but obviously my formatting is incorrect. What would work instead?
2. It takes much longer now to load the page, is there a reason for that?

Thanks for the assistance- I really hope to be up to speed with all of this coding soon enough then I won't have to ask silly questions :-)

And I hope that I haven't overstepped any boundaries that will upset any of the forum members. Again, I am very grateful for any assistance #learningfromthebest

Answer 1

You can build a string of all the selected values like this:

var values = $('input:radio:checked').map(function(radio) { return this.value; })
    .get()
    .join("");

Then you can count the "A", "B", "C", and "D" values like this:

var counts = { A: 0, B: 0, C: 0, D: 0 };
values.replace(/[ABCD]/g, function(letter) {
    counts[letter]++;
});
alert("A's: " + counts.A + " B's: " + counts.B + " C's: " + counts.C + " D's: " + counts.D);

edit here's a slightly less icky and more functional way to do it:

var counts = $('input:radio:checked').map(function(radio) { return this.value; })
    .get()
    .reduce(function(c, letter) {
        c[letter]++;
        return c;
    }, { A: 0, B: 0, C: 0, D: 0 });