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">