Javascript jQuery-列出输入类并获取所选复选框的数量

我正在寻找jQuery代码，它将列出输入中的所有类，并显示每个类（在本例中为class=value）被选择的次数

html架构：

<input type="checkbox" name="t1" class="a1" value="a1">
<input type="checkbox" name="t1" class="a2" value="a2">
<input type="checkbox" name="t1" class="a3" value="a3">
<input type="checkbox" name="t2" class="a1" value="a1">
<input type="checkbox" name="t2" class="a2" value="a2">
<input type="checkbox" name="t2" class="a3" value="a3">
...
<input type="checkbox" name="t9" class="a99" value="a99">

试一试

演示：小提琴：

---

您可以尝试以下方法：

var checked = new Array();

$("input[type=checkbox]").each( function() {
  var cl = $(this).attr('class');
  if (typeof(checked[cl]) == "undefined") checked[cl] = 0;
  if ($(this).is(':checked')) checked[cl]++;
});

在此之后，您将选中包含所有复选框类的变量

，

，每个类有多个复选框

---

让我知道这是否适合您。

基本上，您需要迭代这些输入。。但是你需要一个地方来保存计数

$(".checkboxes").on("change", "input", function() {
var results = {"a1": 0, "a2": 0, "a3": 0};

$(".checkboxes input").each(function(i, checkbox) {
    if (!$(checkbox).prop("checked")) {
        return;
    }

    results[$(checkbox).val()] =  results[$(checkbox).val()] + 1;
});

var resultsToAppend = '';

$.each(results, function(key, value) {
    resultsToAppend += '<li>' + key + ' : ' + value + '</li>';
});

$(".results").html(resultsToAppend);

$（“.checkbox”）。在（“更改”、“输入”函数（）上{
var结果={“a1:0”，a2:0，a3:0}；
$（“.checkbox输入”）。每个（函数（i，复选框）{
如果（！$（复选框）.prop（“选中”））{
返回；
}
结果[$（复选框）.val（）]=结果[$（复选框）.val（）]+1；
});
var resultsToAppend=''；
$。每个（结果、功能（键、值）{
结果出现+='
'+key+'：'+value+'
'；
});
$（“.results”）.html（resultsToAppend）；

}))

您可以像这样使用：

var className = [];
$("#btn").click(function () {
    $("#result").html("");
    $("input[class^=a]").each(function () {
        className.push($(this).attr("class"));
    });
    className = jQuery.unique(className);
    for (i = 0; i < className.length; i++) {
        var count = 0;
        $("." + className[i]).each(function () {
            if (this.checked) {
                count++;
            }
        });
        $("#result").append(
            "<br/><span> " +
                "className: " + className[i] + ", " +
                "count :" + count + 
            "</span>"
        );
    }
});

var className=[]；
$（“#btn”）。单击（函数（）{
$（“#结果”）.html（“”）；
$（“输入[class^=a]”）。每个（函数（）{
push（$（this.attr（“class”））；
});
className=jQuery.unique（className）；
对于（i=0；i”+
类名称：“+className[i]+”+
“计数：”+count+
""
);
}
});

---

演示

请注意，您也可以动态构建结果图。。所以它不需要初始化。至少那些投反对票的人应该澄清为什么投反对票？这些看起来不错，谢谢。如何在页面加载时构建结果映射？类的数量可能会有所不同，因此创建静态数组将不起作用。动态数组可以很容易地完成。。如果要在页面加载时执行此操作，请使用：$（document）.ready（函数（）{/*将代码放在这里*/}）；这里有一个修改过的提琴，可以在页面加载时动态工作：好吧，没有人唱“到目前为止你都做了什么？”♪♫

var checked = new Array();

$("input[type=checkbox]").each( function() {
  var cl = $(this).attr('class');
  if (typeof(checked[cl]) == "undefined") checked[cl] = 0;
  if ($(this).is(':checked')) checked[cl]++;
});

$(".checkboxes").on("change", "input", function() {
var results = {"a1": 0, "a2": 0, "a3": 0};

$(".checkboxes input").each(function(i, checkbox) {
    if (!$(checkbox).prop("checked")) {
        return;
    }

    results[$(checkbox).val()] =  results[$(checkbox).val()] + 1;
});

var resultsToAppend = '';

$.each(results, function(key, value) {
    resultsToAppend += '<li>' + key + ' : ' + value + '</li>';
});

$(".results").html(resultsToAppend);

var className = [];
$("#btn").click(function () {
    $("#result").html("");
    $("input[class^=a]").each(function () {
        className.push($(this).attr("class"));
    });
    className = jQuery.unique(className);
    for (i = 0; i < className.length; i++) {
        var count = 0;
        $("." + className[i]).each(function () {
            if (this.checked) {
                count++;
            }
        });
        $("#result").append(
            "<br/><span> " +
                "className: " + className[i] + ", " +
                "count :" + count + 
            "</span>"
        );
    }
});