Tengo una serie de casillas de verificación html que estoy tratando de contar así ...
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"> Esto está funcionando correctamente, pero quiero crear algo como una matriz que agrupará el recuento de casillas de verificación en las que se hizo clic por el atributo data-section , por lo que mi salida se vería como...
{ data-section-1 : 4, data-section-2 : 3, data-section-3 : 1, };¿Cuál es mi mejor enfoque? Estoy más acostumbrado a usar PHP, por lo que intentaría crear una matriz, pero ¿debería usar un objeto en su lugar?
Esto es JavaScript estándar, pero debería funcionar para usted:
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]++; } });No necesita jquery (manténgase alejado del bloatware). Simplemente cree un objeto y use el valor del atributo de la sección como sus claves:
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">Obtenga una lista de claves, establezca su valor en 0. Cree un objeto a partir de esas claves. Luego iterar y completar.
$('.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">