jQuery - 列表輸入類和獲取選定複選框的數

我正在尋找jQuery代碼，它將列出輸入中的所有類，並顯示每個類（在本例中class = value）選擇多少次。jQuery - 列表輸入類和獲取選定複選框的數

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

來源

2014-03-04 user3378457

嘛，沒人唱「你嘗試過這麼遠嗎？」 ♪♫ – leaf

嘗試

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

來源

2014-03-04 09:59:24

小提琴：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));

來源

2014-03-04 10:00:58 iappwebdev

你可以嘗試這樣的事：

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包含所有複選框班，與爲每個類檢查箱號。

讓我知道這是否適合你。

來源

2014-03-04 10:01:24

-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

來源

2014-03-04 10:03:41

請注意，您也可以動態地創建結果地圖..所以它不會需要初始化.. –

至少應該進行倒票的人應該澄清爲什麼倒票？ –

這些看起來不錯，謝謝。如何在頁面加載時創建結果地圖？類的數量可能會有所不同，所以創建靜態數組將不起作用。 – user3378457

您可以使用諸如：

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

演示fiddle

來源

2014-03-04 10:07:24

jQuery - 列表輸入類和獲取選定複選框的數

回答

相關問題