• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

160
Vistas
jQuery cuenta casillas de verificación y cuenta de grupo por atributo de datos

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?

about 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

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]++; } });
about 3 years ago · Juan Pablo Isaza Denunciar

0

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

about 3 years ago · Juan Pablo Isaza Denunciar

0

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

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda