如何总结单选按钮选择值（字母，而不是数字）的总数？

Question

我希望能够在 HTML 表单中的问卷末尾添加我的表单选择选项（单选按钮），以便为我提供所有答案的摘要以及每个选项显示的总数。换句话说，有 10 个问题，每个问题都有 A、B、C 或 D 的可能答案。在表格的最后，我希望用户能够看到他们回答了多少 A，多少 B 等.

这是迄今为止我能够整理的内容......

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

我的脚本：

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

这会给我一个警报窗口，并显示我的答案摘要，这没关系。

但我仍然无法弄清楚如何显示上述不同选择的总数 - 因为我所做的研究只引导我找到将数字值相加的示例，这是行不通的就我而言。我是不是从错误的角度看待问题？

如果不可能，那我该怎么办：

1. 在我的警报消息中分隔（换行）2 个结果？ 什么会代替'+'？我试过 '\n' 和 '%n' 但是 显然我的格式不正确。什么会起作用？
2. 现在加载页面需要更长的时间，是否有原因 那个？

感谢您的帮助-我真的希望尽快掌握所有这些编码，然后我就不必问愚蠢的问题了:-)

我希望我没有越过任何会令论坛成员不安的界限。再次，我非常感谢#learningfromthebest 的任何帮助

Answer 1

试试这个：

alert('Number of checked A answers: ' + $('input:radio[value="A"]:checked').length.toString())

选择器说明： 使用input:radio[value="A"]，您告诉jQuery 搜索所有input 类型为radio 且值为“A”的元素。然后，使用:checked，您告诉我们只获取那些被检查的元素。

最后，通过lenght 属性，您将获得 jQuery 找到并添加到 jQuery 对象中的元素数量。

Answer 2

你可以试试这样的：

JavaScript：

$("#radio_submit").on("click", function () {
    var msg = "A: " + Count("A") + "\n"
            + "B: " + Count("B") + "\n"
            + "C: " + Count("C") + "\n"
            + "D: " + Count("D");

    alert(msg);
});

function Count(type) {
    return $("input[type=radio][value='" + type + "']:checked").length;
}

FIDDLE

Answer 3

您可以像这样构建所有选定值的字符串：

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

然后您可以像这样计算“A”、“B”、“C”和“D”值：

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

编辑这里有一个稍微不那么讨厌但更实用的方法：

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 });