3

Tengo una tabla que se va llenando con información de la base de datos. La idea es que la primera carga me de el total de los checkbox marcados, y al desmarcar se dispare una función que recuente los marcados y los totalice.

Esta es la tabla y estoy utilizando esta función para realizar el conteo:

$(document).ready(function() {
  var totalActivo = 0
  $('#tablatotal input checkbox:checked').each(function() {
    if (checkbox).is(':checked') {
      totalActivo++
    } else {
      totalActivo--
    }
  })
})
<table class="table table-striped table-hover" id="tablatotal">
  <hr>
  <thead>
    <tr>
      <td><b> CEDULA IDENTIDAD</b></td>
      <td><b> NOMBRE COMPLETO</b></td>
      <td><b> APELLIDO COMPLETO</b></td>
      <td><b> ACUEDUCTO</b></td>
      <td><input type="checkbox" name="" id="select_all_ids"></td>
    </tr>
  </thead>
  <tbody>
    @if(count($pesonalsg)
    <=0) <tr>
      <td colspan="8">No hay resultados</td>
      </tr>
      @else @foreach($pesonalsg as $p)
      <tr class="fila">
        <td>{{ $p->cedper }}</td>
        <td>{{ $p->nomper }}</td>
        <td>{{ $p->apeper }}</td>
        <td>{{ $p->desubifis }}</td>
        <td><input type="checkbox" name=ids class="checkbox_ids" id="" value="{{ $p->cedper }}"></td>
      </tr>
      @endforeach @endif
      <tr>
        <td colspan="4">{!! $pesonalsg->render() !!}</td>
      </tr>
  </tbody>
</table>

2
  • Te faltó el código de JQuery, haz clic en editar y añade la función que te da problemas. Saludos Commented el 3 jun. 2023 a las 17:57
  • 1
    editada con el codigo de jquery Commented el 3 jun. 2023 a las 18:05

2 respuestas 2

2

Partamos con los errores:

1.- Sobre el input

<input type="checkbox" name=ids class="checkbox_ids" id="" value="{{ $p->cedper }}">

Los id no se pueden repetir, los name teoricamente si, pero yo te recomendaría no repetirlos nunca (salvo los radio buttons)

Luego tu dices que inician todos "chekeados", esto no es así, para que un checkbox esté "chekeado" se requiere usar el atributo checked

<input type="checkbox" checked>

2.- Sobre el css query

$('#tablatotal input checkbox:checked')

Esto busca el elemento que tenga como id tablatotal, luego los hijos que sean del tipo input, luego los hijos del input que sean del tipo checkbox y tengan el atributo checked, es decir te encontraría esto:

<div id="tablatotal">
  <input>
     <checkbox checked>
  </input>
</div>

Lo que claramente es incorrecto

Tu query debería ser:

$('#tablatotal input[type=checkbox]:checked')

3.- Ejemplo:

$(document).ready(function(){
    let totalActivo = GetTotalMarcados();
    console.log(totalActivo);
    
    
    //agregamos un evento para contar ante cualquier cambio
    $('#tablatotal tbody input[type=checkbox]').on("input", function(){
     console.log(GetTotalMarcados());
    });
    
});



function GetTotalMarcados(){
  return $('#tablatotal tbody input[type=checkbox]:checked').length;
}

function selectALL(){
  let isChecked=$(event.target).is(":checked");
 $('#tablatotal tbody input[type=checkbox]').prop("checked",isChecked);
 console.log(GetTotalMarcados());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-hover" id="tablatotal">   
    <hr>
    <thead>
        <tr>
            <td><b> CEDULA IDENTIDAD</b></td>
            <td><b> NOMBRE COMPLETO</b></td>
            <td><b> APELLIDO COMPLETO</b></td>
            <td><b> ACUEDUCTO</b></td>
            <td><input type="checkbox" oninput="selectALL()" name="" id="select_all_ids" checked></td>
        </tr> 
    </thead>
    <tbody>
        <tr class="fila">
            <td>celda</td>
            <td>celda</td>
            <td>celda</td>
           <td>celda</td>
            <td><input type="checkbox" id="id1" name="name1" class="checkbox_ids" checked></td>            
        </tr>
         <tr class="fila">
            <td>celda</td>
            <td>celda</td>
            <td>celda</td>
           <td>celda</td>
            <td><input type="checkbox" name="name2" class="checkbox_ids" id="id2" checked></td>            
        </tr>
         <tr class="fila">
            <td>celda</td>
            <td>celda</td>
            <td>celda</td>
           <td>celda</td>
            <td><input type="checkbox" name="name3" class="checkbox_ids" id="id3" checked></td>            
        </tr>
    </tbody>
</table>

1

Basta con recorrer todos los checkbox con clase checkbox_ids, verificar el estado e incrementar un contador si están checados. Este proceso se hará cada vez que cambie el "estado" de alguno de ellos.

Como bonus, te dejo el código listo por si haces uso del checkbox principal, el cual supongo que marca o desmarca todos los demás.

El código está comentado. Si tienes dudas al respecto, deja un comentario.

Reduje un poco el código html por fines prácticos. Debes adaptar el ejemplo a tu proyecto.

//Al cargar la pagina...
$(document).ready(function() {
  //Ejecutar la función que cuenta los activos
  contarActivos();
});

//Al hacer click en el checkbox con id select_all_ids
$('#select_all_ids').on('change', function() {
  //Detectar el estado del checkbox
  let estado = $(this).is(':checked') ? true : false;
  $('.checkbox_ids').each(function() {
    //Activar o inactivar cada uno de los checkbox...
    //de acuerdo al estado del principal
    $(this).prop('checked', estado);
  });
  //Ejecutar la función que cuenta los activos
  contarActivos();
});

//Al hacer click en cualquiera de otros los checkbox
$('.checkbox_ids').on('change', function() {
  //Ejecutar la función que cuenta los activos
  contarActivos();
});

//Contar los ckeckbox activos
function contarActivos() {
  //Inicializar una varialbe en cero
  let totalActivo = 0;
  //Recorrer cada checkbox con clase checkbox_ids
  $('.checkbox_ids').each(function() {
    if ($(this).is(':checked')) {
      //Incrementar la variable
      totalActivo++;
    }
  });
  //Mostrar el resultado
  console.log(totalActivo);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-hover" id="tablatotal">
  <hr>
  <thead>
    <tr>
      <td><b> CEDULA IDENTIDAD</b></td>
      <td><input type="checkbox" name="" id="select_all_ids"></td>
    </tr>
  </thead>
  <tbody>
    <tr class="fila">
      <td></td>
      <td><input type="checkbox" name=ids class="checkbox_ids" id="" value=""></td>
    </tr>
    <tr class="fila">
      <td></td>
      <td><input type="checkbox" name=ids class="checkbox_ids" id="" value=""></td>
    </tr>
    <tr class="fila">
      <td></td>
      <td><input type="checkbox" name=ids class="checkbox_ids" id="" value=""></td>
    </tr>
    <tr>
      <td colspan="4"></td>
    </tr>
  </tbody>
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.