Necesito llenar el fondo td con color cuando se hace clic en una casilla de verificación. Puedo administrar el fondo al hacer clic. Pero no sé cómo borrarlo sin marcar.
td{padding:10px} <table> <tr> <td><input type="checkbox" value="1">1</td> <td><input type="checkbox" value="2">2</td> <td><input type="checkbox" value="3">3</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> <script> $(function(){ $('td').click(function(event) { if (!$(event.target).is('input')) { $('input:checkbox', this).prop('checked', function(i, value) {return !value;}); $(this).css('background-color','#ffcc00'); } }); }); </script>Puede probar esto ;)
<style>td{padding:10px}</style> <table> <tr> <td><input type="checkbox" value="1">1</td> <td><input type="checkbox" value="2">2</td> <td><input type="checkbox" value="3">3</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> <script> $(function() { $('td').click(function(e) { // Get input var input = $(this).find('input:checkbox'); // Toggle checkbox status if(!$(e.target).is('input')) input.prop('checked', !input.is(':checked')); // Toggle background-color $(this).css('background-color', input.is(':checked') ? '#ffcc00' : 'transparent'); }); }); </script>Haría algo como esto para alternar el color de fondo. Prefiero el selector de clase/id que usar el selector de etiquetas, y para indicar que la clase se usa en JS, agregué "js_" al nombre de la clase al principio, actualícelo como desee.
$(function() { $(".js_checkbox").on('click', function(e) { let checkbox = $(this); let td = $(checkbox).closest("td"); if ($(checkbox).is(":checked")) { $(td).css("background-color", "#ffcc00") } else { $(td).css("background-color", "") } }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td><input type="checkbox" class="js_checkbox" value="1">1</td> <td><input type="checkbox" class="js_checkbox" value="2">2</td> <td><input type="checkbox" class="js_checkbox" value="3">3</td> </tr> </table>Mantenlo simple y alterna el color de fondo a través del booleano. No estoy seguro de por qué está poniendo a su oyente en el TD en lugar de la casilla de verificación.
$(function() { $('td [type=checkbox]').click(function() { $(this).closest('td').css('background-color', $(this).prop('checked') ? "#ffcc00" : "#fff"); }); }); td { padding: 10px } <table> <tr> <td><label><input type="checkbox" value="1">1</label></td> <td><label><input type="checkbox" value="2">2</label></td> <td><label><input type="checkbox" value="3">3</label></td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>