Question

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

到目前为止，我能够将这些内容整合在一起......

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

这给了我一个警告窗口，并显示了我的答案摘要，这是好的。

但我仍然无法弄清楚如何显示上述不同选择的总数 - 因为我所做的研究只引出了我加上数值的例子，在我的案子中不会工作。我是从错误的角度看问题吗？

如果不可能，我怎么能：

分离（换行）2会导致我的提醒信息？什么会起作用而不是＆＃39; +＆＃39;？我试过了＆＃39; \ n＆＃39;和＆＃39;％n＆＃39;但显然我的格式不正确。会改变什么呢？
现在加载页面需要更长的时间，是否有原因是什么？

感谢您的帮助 - 我真的希望尽快加快所有这些编码的速度，然后我不必问愚蠢的问题： - ）

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

Answer 1

您可以尝试这样的事情：

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

您可以构建一个包含所有选定值的字符串，如下所示：

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

Answer 3

试试这个：

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

选择器的说明：使用input:radio[value="A"]，您告诉jQuery搜索具有值“A”的input类型的所有radio元素。然后，使用:checked，您只需要获取已检查的元素。

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

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

3 个答案: