jQuery 按數據屬性計算復選框和組數

Question

我有很多 html 個復選框，我想像這樣計算......

 jQuery('.mycheckboxes').change(function() { var count = jQuery('.mycheckboxes:checked').length; console.log(count); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="mycheckboxes" data-section="1" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="1" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="1" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="1" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="2" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="2" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="2" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="2" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="3" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="3" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="3" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="3" name="mycheckboxes">

這工作正常，但我想創建一個類似數組的東西，它將按data-section屬性對單擊復選框的計數進行分組，所以我的 output 看起來像......

{
    data-section-1 : 4,
    data-section-2 : 3,
    data-section-3 : 1,
};

我最好的方法是什么，我更習慣使用 PHP 所以會嘗試創建一個數組，但我應該使用 object 嗎？

Answer 1

這是香草 JavaScript，但應該適合你：

let finalArray = [0,0,0];
const dataSections1 = document.querySelectorAll("[data-section='1']");
const dataSections2 = document.querySelectorAll("[data-section='2']");
const dataSections3 = document.querySelectorAll("[data-section='3']");
dataSections1.forEach((function(item) {
  if (item.checked) {
    finalArray[0]++;
  }
});
dataSections2.forEach((function(item) {
  if (item.checked) {
    finalArray[1]++;
  }
});
dataSections3.forEach((function(item) {
  if (item.checked) {
    finalArray[2]++;
  }
});

Answer 2

不需要 jquery（遠離過時軟件）。 只需創建一個 object 並使用部分屬性值作為它的鍵：

 const count = {}; for(let i = 0, list = document.querySelectorAll(".mycheckboxes"); i < list.length; i++) { count[list[i].dataset.section] = 0; //set initial values for each section list[i].addEventListener("change", onChange); } function onChange(e) { count[e.target.dataset.section] += e.target.checked? 1:-1; console.log(count); }

 <input type="checkbox" class="mycheckboxes" data-section="1" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="1" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="1" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="1" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="2" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="2" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="2" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="2" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="3" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="3" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="3" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="3" name="mycheckboxes">

Answer 3

獲取鍵列表，將它們的值設置為 0。從這些鍵創建一個 object。 然后迭代並填充。

 $('.mycheckboxes').change(function() { var items = $('.mycheckboxes:checked').toArray(); let keyvalueArray = items.map(v => (["data-section-" + $(v).attr("data-section"), 0 ])); let sections = Object.fromEntries([... new Set(keyvalueArray)]); items.forEach(v => { sections["data-section-" + $(v).attr("data-section")] +=1; }) console.log(sections); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="mycheckboxes" data-section="1" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="1" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="1" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="1" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="2" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="2" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="2" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="2" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="3" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="3" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="3" name="mycheckboxes"> <input type="checkbox" class="mycheckboxes" data-section="3" name="mycheckboxes">