javascript - cambiar - Cuente el número de casillas marcadas en HTML

html tooltip tag

Question

Así que básicamente quiero contar el número de casillas de verificación que están marcadas. Obtengo mi código hasta el punto en el que los cuenta correctamente, pero quiero poner una alerta que muestre el número de casillas marcadas, el código hace esto pero no muestra el recuento total, incrementa el total de cada actualización. Sólo quiero saber cómo puedo mostrar un recuento total.

Debería mostrar el total cuando se hace clic en el botón de opción ''Sí''.

<br />Apples
<input type="checkbox" name="fruit" />Oranges
<input type="checkbox" name="fruit" />Mango
<input type="checkbox" name="fruit" />
<br />Yes
<input type="radio" name="yesorno" id="yes" onchange="checkboxes()"

function checkboxes(){
    var inputElems = document.getElementsByTagName("input"),
    count = 0;
    for (var i=0; i<inputElems.length; i++) {
    if (inputElems[i].type === "checkbox" && inputElems[i].checked === true){
        count++;
        alert(count);
    }
}}

Answer 1

El código inicial era casi correcto. la alerta de línea (contar); Estaba en el lugar equivocado. Debería haber llegado después de la segunda llave de cierre como esta:

 function checkboxes()
  {
   var inputElems = document.getElementsByTagName("input"),
    count = 0;

    for (var i=0; i<inputElems.length; i++) {       
       if (inputElems[i].type == "checkbox" && inputElems[i].checked == true){
          count++;
       }
    }
    alert(count);
 }

En el lugar equivocado, le estaba dando un mensaje de alerta con cada casilla marcada.

Answer 2

Esto debería funcionar:

alert(document.querySelectorAll(''input[type="checkbox"]:checked'').length);

Answer 3

Gracias a Marlon Bernardes por esto. alert(document.querySelectorAll(''input[type="checkbox"]:checked'').length);

Si tiene más de un formulario con diferentes nombres de casilla de verificación en cada uno, el código anterior contará todas las casillas de verificación en todos los formularios.

Para superar esto, puede modificarlo para aislarlo por nombre.

var le = document.querySelectorAll(''input[name="chkboxes[]"]:checked'').length;

Answer 4

Prueba este codigo

 <br />Apples
                <input type="checkbox" name="fruit" checked/>Oranges
                <input type="checkbox" name="fruit" />Mango
                <input type="checkbox" name="fruit" />

                <br />Yes
<input type="radio" name="yesorno" id="yes" onClick="checkboxes();" />

Javascript

     function checkboxes()
      {
       var inputElems = document.getElementsByTagName("input"),
        count = 0;

        for (var i=0; i<inputElems.length; i++) {       
           if (inputElems[i].type == "checkbox" && inputElems[i].checked == true){
              count++;
              alert(count);
           }

        }
     }

DEMO DE FIDDLE

Answer 5

prueba esto usando jQuery

Método 1:

alert($(''.checkbox_class_here :checked'').size());

Método 2:

alert($(''input[name=checkbox_name]'').attr(''checked''));

Método: 3

alert($(":checkbox:checked").length);

Answer 6

var checkboxes = document.getElementsByName("fruit");
for(int i;i<checkboxes.length;i++)
{
if(checkboxes[i].checked==0){checkboxes.splice(i,1);}
}
alert("Number of checked checkboxes: "+checkboxes.length);