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

时间:2014-03-04 09:53:07

标签: javascript jquery

我正在寻找jQuery代码,它将列出输入中的所有classess并显示每个类(在本例中为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">

预期结果的例子:

a1 - 2
a2 - 0
a3 - 0
a99 - 0

5 个答案:

答案 0 :(得分:0)

尝试

var map = {};
$('input[type=checkbox]').each(function () {
    if (this.checked) {
        map[this.className] = (map[this.className] || 0) + 1;
    } else {
        map[this.className] = map[this.className] || 0;
    }
});
console.log(map)

演示:Fiddle

答案 1 :(得分:0)

小提琴:http://jsfiddle.net/smBSw/1/

var resultList = {}

$('input:checkbox').each(function () {
    var result = resultList[this.className] || 0;

    if (this.checked) {
        result++;
    }

    resultList[this.className] = result;
});

console.log(resultList)
console.log(JSON.stringify(resultList));

答案 2 :(得分:0)

您可以尝试这样的事情:

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

在此之后,您将拥有包含所有复选框类的变量checked,每个类的复选框数量。

请告诉我这是否适合您。

答案 3 :(得分:0)

您可以使用:

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

demo fiddle

答案 4 :(得分:-1)

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

$(".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);

});

Here's a fiddle