Verwenden von JQuery zum Ändern von CSS von td auf td klicken oder Kontrollkästchen klicken

Question

Ich versuche, meine td Farbe zu ändern, wenn der Benutzer auf die td selbst oder das Kontrollkästchen klickt.

Jetzt, wenn der Benutzer auf td klickt die css ändern und das Kontrollkästchen wird aktivieren/deaktivieren.

Aber wenn das Kontrollkästchen angeklickt, ändert sich nichts. zusätzlich, wenn die Seite aktualisiert wird, sind die Checkboxen aktiviert, aber das CSS ist weg.

Was mache ich falsch?

JSFiddle

<table> 
<tr><td><input type="checkbox" name="my-group[]" value="1">A</td></tr> 
<tr><td><input type="checkbox" name="my-group[]" value="2">B</td></tr> 
<tr><td><input type="checkbox" name="my-group[]" value="3">C</td></tr> 
<tr><td><input type="checkbox" name="my-group[]" value="4">D</td></tr> 
</table> 

<script> 
var chosen = {'background-color': '#9F1313', 'color': '#fff'}; 
var unchosen = {'background-color': 'transparent', 'color': '#000'}; 

$('td').click(function (event) { 
    if (!$(event.target).is('input')) { 
     $('input:checkbox', this).prop('checked', function (i, value) { 
      highlight(this, $(this).closest('td')); 
      return !value; 
     }); 
    } 
}); 

function highlight(cb, cell) { 
    if (cb.checked) { 
     $(cell).css(unchosen); 
    } else { 
     $(cell).css(chosen); 
    } 
} 
</script> 

Answer 1

Das Problem ist aufgrund der Veranstaltung aus dem Kontrollkästchen, um die übergeordneten sprudelnden td Sie können jedoch sowohl das Problem vollständig vermeiden, stellen Sie den Code semantische, haben eine bessere Unterstützung und einfacher durch Verwenden Sie eine label und dann nur eine CSS-Klasse auf dem Eltern td basierend auf dem checked Zustand des Kontrollkästchens. Versuchen Sie folgendes:

$('.table-responsive :checkbox').on('change', function() { 
 
    $(this).closest('td').toggleClass('chosen', this.checked); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<style> 
 
    label { 
 
    display: block; 
 
    font-weight: normal; 
 
    margin: 0; 
 
    } 
 
    
 
    td { 
 
    background-color: transparent; 
 
    color: #000; 
 
    } 
 
    
 
    td.chosen { 
 
    background-color: #9F1313; 
 
    color: #fff; 
 
    } 
 
</style> 
 
<div class="table-responsive"> 
 
    <div class="container"> 
 
    <table class="table table-striped table-hover table-condensed"> 
 
     <tr> 
 
     <td><label><input type="checkbox" name="my-group[]" value="1"> A</label></td> 
 
     </tr> 
 
     <tr> 
 
     <td><label><input type="checkbox" name="my-group[]" value="2"> B</label></td> 
 
     </tr> 
 
     <tr> 
 
     <td><label><input type="checkbox" name="my-group[]" value="3"> C</label></td> 
 
     </tr> 
 
     <tr> 
 
     <td><label><input type="checkbox" name="my-group[]" value="4"> D</label></td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

Answer 2

Das ist mein Vorschlag ist, wird dieses Ereignis binden sowohl TD und Checkbox, während auch von Doppelauslösungen zu verhindern.

$('td').on('click',function(event){ 
    var td = $(this); 
    var checkBox = $(this).find('input:checkbox'); 

    if($(event.target).is('input')){     // checks if event target is checkbox 
     event.stopPropagation();      // prevents triggering click event on TD too 
    } else { 
     checkBox.trigger('click');     // if its TD, triggers checkbox click event 
     return;          // and stop the code 
    } 

    if(checkBox.is(':checked')){      // checks if checkbox is checked! 
     td.css('background-color','red'); 
    } else { 
     td.css('background-color','transparent'); 
    } 

}); 

Sie können es in Aktion sehen hier: https://codepen.io/FaridNaderi/pen/PjVXrm

Hoffe, dass es zumindest hilft.

Answer 3

Das Problem ist von der Ereignis sprudelnden hinzufügen event.stopImmediatePropagation(); zu Ihrem Klick-Ereignis.

$('td').click(function(event) { 
event.stopImmediatePropagation(); 
if (!$(event.target).is('input')) { 
$('input:checkbox', this).prop('checked', function(i, value) { 
    highlight(this, $(this).closest('td')); 
    return !value; 
}); 
} 
});