Skip to main content
Aplicar cambio directamente en switch en lugar de checkbox.
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

SeguramenteDe acuerdo a la documentación solo necesitas ejecutar el problema es que estás tratando demétodo .bootstrapToggle() para asignar el nuevo estado on => activo o checked con base en el valor actual de cadau checkbox en vez del "Seleccionar todo", de forma que no importa cuáles estén marcadosoff => inactivo o !checked y cuáles no, siempre se van a poner todos iguales.

Otra mejorarequiere que probablemente necesitas en tu script es cambiar claseesté dentro de launa etiqueta cuando se marcan o desmarcan individualmente:

// Marcar o desmarcar todos los checkboxes
$("#todos").on('click', function() {
    // Obtener valor que se aplicará todos en la tabla
    let checked = $(this).prop('checked');
    $('#table_Permisos input[type="checkbox"]').each(function() {
        // Marcar o desmarcar
        $(this).prop('checked', checked);
        // Agregar o quitar clase
        if(checked) {
            $(this).parents('label').addClass('active');
       ? }'on' else: {'off';
            $(this).parents('label''#table_Permisos input[type="checkbox"]').removeClassbootstrapToggle('active');
        }
    }checked);
});

// Cambiar claseSolo depara etiquetaverificar alque marcarse oactualizan desmarcarlos checkboxvalores
$('#table_Permisos input[type="checkbox"]').on('click''change', function() {
    ifconsole.log($(this).prop('checked')) {
        // Esta marcado, agregar clase
        $(this).parents('label').addClass('active');
    } else {
        // Esta desmarcado, quitar clase
        $(this).parents('label').removeClass('active');
    }
});
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><label><input<td><input type="checkbox"></label><type="checkbox" data-toggle="toggle"></td>
    <td><label><input<td><input type="checkbox"></label><type="checkbox" data-toggle="toggle"></td>
    <td><label><input<td><input type="checkbox"></label><type="checkbox" data-toggle="toggle"></td>
  </tr>
</table>
<label><input type="checkbox" id="todos"> Marcar / desmarcar todos</label>

Seguramente el problema es que estás tratando de asignar checked con base en el valor actual de cada checkbox en vez del "Seleccionar todo", de forma que no importa cuáles estén marcados y cuáles no, siempre se van a poner todos iguales.

Otra mejora que probablemente necesitas en tu script es cambiar clase de la etiqueta cuando se marcan o desmarcan individualmente:

// Marcar o desmarcar todos los checkboxes
$("#todos").on('click', function() {
    // Obtener valor que se aplicará todos en la tabla
    let checked = $(this).prop('checked');
    $('#table_Permisos input[type="checkbox"]').each(function() {
        // Marcar o desmarcar
        $(this).prop('checked', checked);
        // Agregar o quitar clase
        if(checked) {
            $(this).parents('label').addClass('active');
        } else {
            $(this).parents('label').removeClass('active');
        }
    });
});

// Cambiar clase de etiqueta al marcar o desmarcar checkbox
$('#table_Permisos input[type="checkbox"]').on('click', function() {
    if($(this).prop('checked')) {
        // Esta marcado, agregar clase
        $(this).parents('label').addClass('active');
    } else {
        // Esta desmarcado, quitar clase
        $(this).parents('label').removeClass('active');
    }
});
label.active {
  background:#00a;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table id="table_Permisos">
  <tr>
    <td><label><input type="checkbox"></label></td>
    <td><label><input type="checkbox"></label></td>
    <td><label><input type="checkbox"></label></td>
  </tr>
</table>
<label><input type="checkbox" id="todos"> Marcar / desmarcar todos</label>

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>
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

Seguramente el problema es que estás tratando de asignar checked con base en el valor actual de cada checkbox en vez del "Seleccionar todo", de forma que no importa cuáles estén marcados y cuáles no, siempre se van a poner todos iguales.

Otra mejora que probablemente necesitas en tu script es cambiar clase de la etiqueta cuando se marcan o desmarcan individualmente:

// Marcar o desmarcar todos los checkboxes
$("#todos").on('click', function() {
    // Obtener valor que se aplicará todos en la tabla
    let checked = $(this).prop('checked');
    $('#table_Permisos input[type="checkbox"]').each(function() {
        // Marcar o desmarcar
        $(this).prop('checked', checked);
        // Agregar o quitar clase
        if(checked) {
            $(this).parents('label').addClass('active');
        } else {
            $(this).parents('label').removeClass('active');
        }
    });
});

// Cambiar clase de etiqueta al marcar o desmarcar checkbox
$('#table_Permisos input[type="checkbox"]').on('click', function() {
    if($(this).prop('checked')) {
        // Esta marcado, agregar clase
        $(this).parents('label').addClass('active');
    } else {
        // Esta desmarcado, quitar clase
        $(this).parents('label').removeClass('active');
    }
});
label.active {
  background:#00a;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table id="table_Permisos">
  <tr>
    <td><label><input type="checkbox"></label></td>
    <td><label><input type="checkbox"></label></td>
    <td><label><input type="checkbox"></label></td>
  </tr>
</table>
<label><input type="checkbox" id="todos"> Marcar / desmarcar todos</label>