1

deseo agregar un input tipo checkbox que me permita marcar como "chequeados" todos los los checkbox que se encuentran en un dataTable, estos checkbox tienen un estilo de bootstrap-switch a como pongo se muestra en la siguiente imagen introducir la descripción de la imagen aquí al hacer click en Seleccionar todos todos se cambien su estado a checked

he probado esto pero no me funciona

$('#table_Permisos input[type="checkbox"]').each(function(){
        // toggle checkbox
        $(this).prop('checked',!$(this).prop('checked'));
        // toggle class
        $(this).parents('label').toggleClass('active');
    });c

}); cualquier opinion me sera de mucha ayuda de ante mano gracias parte del codigo html

agrego captura de como agrego los inputs al data table introducir la descripción de la imagen aquí

4
  • ¿Qué es lo que no funciona? a) No marca los checkboxes b) No aplica estilo a los switches c) Ambas
    – Triby
    Commented el 4 mar. 2021 a las 16:56
  • no marca los checkboxes de la tabla, permitame la edito Commented el 4 mar. 2021 a las 16:59
  • Agrega console.log($(this)[0]); deberías ver en consola cada checkbox, si no, el selector es incorrecto. En todo caso, edita la pregunta para agregar el HTML de la tabla como se ve en el navegador -> ver código fuente, solo un par de filas será suficiente.
    – Triby
    Commented el 4 mar. 2021 a las 17:08
  • los checkbox los logro ver en consola, pero al querer hacer un prop(checked), no lo hace, Commented el 4 mar. 2021 a las 17:13

1 respuesta 1

1

De acuerdo a la documentación solo necesitas ejecutar el método .bootstrapToggle() para asignar el nuevo estado on => activo o checked u off => inactivo o !checked y no se requiere que esté dentro de una etiqueta:

// Marcar o desmarcar todos los checkboxes
$("#todos").on('click', function() {
    // Obtener valor que se aplicará todos en la tabla
    let checked = ($(this).prop('checked')) ? 'on' : 'off';
    $('#table_Permisos input[type="checkbox"]').bootstrapToggle(checked);
});

// Solo para verificar que se actualizan los valores
$('#table_Permisos input[type="checkbox"]').on('change', function() {
    console.log($(this).prop('checked'));
});
label.active {
  background:#00a;
}
<link href="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/js/bootstrap4-toggle.min.js"></script>
<table id="table_Permisos">
  <tr>
    <td><input type="checkbox" data-toggle="toggle"></td>
    <td><input type="checkbox" data-toggle="toggle"></td>
    <td><input type="checkbox" data-toggle="toggle"></td>
  </tr>
</table>
<label><input type="checkbox" id="todos"> Marcar / desmarcar todos</label>

3
  • gracias por tu ayuda, aun sigue sin marcar todos los checkbox de la table agregare a la pregunta una captura del columDef de como agrego los checkbox, estoy suponiendo que el plugin de bootstrapSwitch no le deja cambiar el estado, trate de agregar los labels a cada input type check pero sigue sin cambiar el off del cechbox Commented el 4 mar. 2021 a las 22:37
  • @juanchoperez, listo, actualicé la respuesta, ya debe funcionar sin problema.
    – Triby
    Commented el 4 mar. 2021 a las 23:13
  • muchisimas gracias estimado, me resulto de mucha ayuda tu comentario Commented el 5 mar. 2021 a las 15:54

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.