How can I correctly select and deselect all the rows of the table with the switches that are green, since when deselecting the checkbox that selects all, it DOES NOT ALLOW ME to remove the check.
I am using this script to select and deselect the switches in green, I don't know what error can occur:
$(".chk-all-seleccion").on("change", function () {
if ($(this).prop("checked", true)) {
$(".chk-asistencia").each(function (index, element) {
$(element).prop("checked", true);
if ($(element).is(':checked')) {
$(element).parent().parent().css("background", "#FFE0B2");
}
});
}
else {
$(".chk-asistencia").each(function (index, element) {
$(element).prop("checked", true);
$(element).parent().parent().css("background", "");
});
}
});
/*SELECCIONAR Y DESELECIONAR CADA CHECKBOX*/
$(document).on('change', '.chk-seleccion', function () {
if ($(this).is(':checked')) {
$(this).parent().parent().css("background","#FFE0B2");
}
else {
$(this).parent().parent().css("background", "");
}
});
/*SELECCIONAR Y DESELECIONAR TODOS LOS CHECKBOXES*/
$(".chk-all-seleccion").on("change", function () {
if ($(this).prop("checked", true)) {
$(".chk-asistencia").each(function (index, element) {
if ($(element).is(':checked')) {
$(element).parent().parent().css("background", "#FFE0B2");
}
});
}
else {
$(".chk-asistencia").each(function (index, element) {
$(element).prop("checked", true);
$(element).parent().parent().css("background", "");
});
}
});
/*SWITCH*/
:root {
--color-title: #C8553D;
--color-off: #dc3545;
--color-on: #28a745;
--color-gray: #EDEDED;
--color-hover: #fff;
--transition-time: 0.4s;
--scale-size: scale(1.1);
--switch-width: 60px;
--switch-height: 25px;
}
.switch {
-webkit-appearance: none;
display: block;
position: relative;
width: var(--switch-width);
height: var(--switch-height);
background: var(--color-off);
box-shadow: inset 0 0 5px rgba(0,0,0,.2);
outline: none;
transition: var(--transition-time);
cursor: pointer;
}
.switch:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: calc(var(--switch-width)/2);
height: var(--switch-height);
transform: var(--scale-size);
box-shadow: 0 2px 15px rgba(0,0,0,.2);
background: var(--color-gray);
transition: var(--transition-time);
}
.switch:checked {
background: var(--color-on);
}
.switch:hover:before {
background: var(--color-hover);
transition: var(--transition-time);
}
.switch:checked:before {
left: 50%;
}
.switch--circle {
border-radius: 50px;
}
.switch--circle:before {
border-radius: 50%;
}
@@keyframes pulse-animation {
100% {
transform: scale(1.2);
}
}
/*CONTENEDOR*/
.container {
max-width: 1300px;
}
/*TABLA*/
label {
margin-bottom: 0;
}
.th-asistencia {
width: 20%;
}
.td-asistencia {
display: flex;
justify-content: space-evenly;
}
.asistencia_Inter {
display: none;
}
.td-seleccion {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<label>Seleccionar todos los presentes: </label>
<input class="chk-all-seleccion" type="checkbox" />
<hr />
<table class="table table-bordered table-striped">
<tbody><tr class="tr-head-interesado">
<th class=""></th>
<th>
DNI:
</th>
<th>
Apellido Paterno:
</th>
<th>
Apellido Materno:
</th>
<th>
Nombres:
</th>
<th class="th-asistencia">
Asistencia:
</th>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">78547532</label>
</td>
<td>
<label class="apePat_Inter">SAHUINCO</label>
</td>
<td>
<label class="apeMat_Inter">VARGAS</label>
</td>
<td>
<label class="nombres_Inter">ALIDA JOAQUINA</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">FALTO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">76544435</label>
</td>
<td>
<label class="apePat_Inter">YOVERA</label>
</td>
<td>
<label class="apeMat_Inter">INFANTE</label>
</td>
<td>
<label class="nombres_Inter">JUAN MARCOS</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">FALTO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">76474540</label>
</td>
<td>
<label class="apePat_Inter">PAREDES</label>
</td>
<td>
<label class="apeMat_Inter">MENDOZA</label>
</td>
<td>
<label class="nombres_Inter">JULIO RONAL</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">FALTO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">76475090</label>
</td>
<td>
<label class="apePat_Inter">RAMOS</label>
</td>
<td>
<label class="apeMat_Inter">HUANCA</label>
</td>
<td>
<label class="nombres_Inter">CLINDIO</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">FALTO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">72766321</label>
</td>
<td>
<label class="apePat_Inter">MARCELO</label>
</td>
<td>
<label class="apeMat_Inter">ATOCHE</label>
</td>
<td>
<label class="nombres_Inter">JADIRA JAZMIN</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">ASISTIO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">75454576</label>
</td>
<td>
<label class="apePat_Inter">ACHA</label>
</td>
<td>
<label class="apeMat_Inter">CASTILLO</label>
</td>
<td>
<label class="nombres_Inter">GIANNINA NICOLE</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">FALTO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">75943583</label>
</td>
<td>
<label class="apePat_Inter">ARHUIS</label>
</td>
<td>
<label class="apeMat_Inter">CANALES</label>
</td>
<td>
<label class="nombres_Inter">NATHALY ANTHUANED</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">ASISTIO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">75435908</label>
</td>
<td>
<label class="apePat_Inter">REYES</label>
</td>
<td>
<label class="apeMat_Inter">ANICETO</label>
</td>
<td>
<label class="nombres_Inter">GERSON CHRISTIAN</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">FALTO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">74547658</label>
</td>
<td>
<label class="apePat_Inter">CALLE</label>
</td>
<td>
<label class="apeMat_Inter">CALLE</label>
</td>
<td>
<label class="nombres_Inter">ELVIS MANUEL</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">ASISTIO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">76565446</label>
</td>
<td>
<label class="apePat_Inter">ZAPANA</label>
</td>
<td>
<label class="apeMat_Inter">DIAZ</label>
</td>
<td>
<label class="nombres_Inter">RAY CARLOS</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">FALTO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">76543354</label>
</td>
<td>
<label class="apePat_Inter">MANAYAY</label>
</td>
<td>
<label class="apeMat_Inter">SANCHEZ</label>
</td>
<td>
<label class="nombres_Inter">FERNANDO ALONSO</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">ASISTIO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">76475156</label>
</td>
<td>
<label class="apePat_Inter">POMA</label>
</td>
<td>
<label class="apeMat_Inter">VIDAL</label>
</td>
<td>
<label class="nombres_Inter">GIAN FRANCO ALEXIS</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">FALTO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">74536546</label>
</td>
<td>
<label class="apePat_Inter">ROJAS</label>
</td>
<td>
<label class="apeMat_Inter">CONDORI</label>
</td>
<td>
<label class="nombres_Inter">MICHAEL DANIEL</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">ASISTIO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">71324657</label>
</td>
<td>
<label class="apePat_Inter">SAMANIEGO</label>
</td>
<td>
<label class="apeMat_Inter">AQUINO</label>
</td>
<td>
<label class="nombres_Inter">VLADIMIR ILICH</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">FALTO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">45654663</label>
</td>
<td>
<label class="apePat_Inter">ALIAGA</label>
</td>
<td>
<label class="apeMat_Inter">GUZMAN</label>
</td>
<td>
<label class="nombres_Inter">CARELIA</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">ASISTIO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">74567564</label>
</td>
<td>
<label class="apePat_Inter">FLORENTINO</label>
</td>
<td>
<label class="apeMat_Inter">VASQUEZ</label>
</td>
<td>
<label class="nombres_Inter">RENE</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">FALTO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">76446650</label>
</td>
<td>
<label class="apePat_Inter">CARLOS</label>
</td>
<td>
<label class="apeMat_Inter">CESPEDES</label>
</td>
<td>
<label class="nombres_Inter">GLADIS EDITA</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">ASISTIO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">77676575</label>
</td>
<td>
<label class="apePat_Inter">MARCOS</label>
</td>
<td>
<label class="apeMat_Inter">HERRERA</label>
</td>
<td>
<label class="nombres_Inter">FATIMA CELESTE</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">FALTO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">75435354</label>
</td>
<td>
<label class="apePat_Inter">HUINCHO</label>
</td>
<td>
<label class="apeMat_Inter">TAIPE</label>
</td>
<td>
<label class="nombres_Inter">ESTEFANI PATRICIA</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">ASISTIO</label>
</td>
</tr>
<tr class="tr-interesado">
<td class="td-seleccion">
<input class="chk-seleccion" type="checkbox">
</td>
<td>
<label class="dni_Inter">76545433</label>
</td>
<td>
<label class="apePat_Inter">ESPEZA</label>
</td>
<td>
<label class="apeMat_Inter">GOMEZ</label>
</td>
<td>
<label class="nombres_Inter">LIZ MARLENY</label>
</td>
<td class="td-asistencia">
<label>FALTO</label>
<input class="chk-asistencia switch switch--circle" style="" type="checkbox">
<label>ASISTIO</label>
<label class="asistencia_Inter">FALTO</label>
</td>
</tr>
</tbody></table>
There are different ways to validate that a check type input is
checado
, you can visualize it in .prop() use the method.is(':checked');
since in the example of the page, when using.attr()
it does not change thebooleano
afalse
when entering thechange
, it only validates it once, but with.prop()
andis.()
if it does, you also have an error, being false you must put.prop("checked", false);
.