I'm trying to change the color of a label when I clicked the checkBox, but when I deselect the checkBox I want it to go back to its normal background color, for that I use this script:
$(document).on('change', '.chk-seleccion', function () {
var color_temporal = $(this).parent().css("background");
console.log(color_temporal);
if ($(this).is(':checked')) {
$(this).parent().parent().css("background","#FFE0B2");
}
else {
$(this).parent().parent().css("background", color_temporal);
}
});
But it ONLY puts it in the same color, I don't know if there is another way to get it.
$(document).on('change', '.chk-seleccion', function () {
var color_temporal = $(this).parent().css("background");
console.log(color_temporal);
if ($(this).is(':checked')) {
$(this).parent().parent().css("background","#FFE0B2");
}
else {
$(this).parent().parent().css("background", color_temporal);
}
});
<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>
<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>
For this you don't need to know the value of the CSS property of the element, what you want is for it to return to its original position no matter what it is.
An easy way to do this would be to specify a value when the checkbox is checked (as you're already doing), and when it's not checked, simply remove the attribute you specified (assigning it to an empty value).
De ese modo no tienes que estar controlando el color del padre (o del padre del padre) y toma el valor que tenía por defecto en las hojas de estilo (porque se quita el estilo en línea).
Aquí lo puedes ver funcionando: