Données de table Hilight lorsque CheckBox est cochée et non mouillée lorsqu'elle n'est pas cochée

Question

J'ai la liste de cases à cocher suivante dans le tableau. Je veux hilight le <td> quand une case est cochée et unhighight quand la case n'est pas cochée. Je sais que je dois ajouter la classe à <td> lorsque la case est cochée et supprimer la classe si elle n'est pas cochée.

<table id="cbDepartment"> 
    <tbody><tr> 
     <td><input type="checkbox" name="cbDepartment0" id="cbDepartment_0"><label for="cbDepartment_0">Check Box 1</label></td> 
     <td><input type="checkbox" name="cbDepartment1" id="cbDepartment_1"><label for="cbDepartment_1">Check Box 2</label></td> 
     <td><input type="checkbox" name="cbDepartment2" id="cbDepartment_2"><label for="cbDepartment_2">Check Box 3</label></td> 
    </tr><tr> 
     <td><input type="checkbox" name="cbDepartment3" id="cbDepartment_3"><label for="cbDepartment_3">Check Box 4</label></td> 
     <td><input type="checkbox" name="cbDepartment4" id="cbDepartment_4"><label for="cbDepartment_4">Check Box 5</label></td> 
     <td><input type="checkbox" name="cbDepartment5" id="cbDepartment_5"><label for="cbDepartment_5">Check Box 6</label></td> 
    </tr><tr> 
     <td><input type="checkbox" name="cbDepartment6" id="cbDepartment_6"><label for="cbDepartment_6">Check Box 7</label></td> 
     <td><input type="checkbox" name="cbDepartment7" id="cbDepartment_7"><label for="cbDepartment_7">Check Box 8</label></td> 
     <td><input type="checkbox" name="cbDepartment8" id="cbDepartment_8"><label for="cbDepartment_8">Check Box 9</label></td> 
    </tr> 
</tbody> 
</table> 

Answer 1

Voici une façon de le faire:

jQuery(function() { 
    $('#cbDepartment :checkbox').click(function() { 
    var cell = $(this).closest('td'); 

    if ($(this).is(':checked')) { 
     cell.addClass('check'); 
    } 
    else { 
     cell.removeClass('check'); 
    } 
    }); 
}); 

Un exemple concret: http://www.jsfiddle.net/VTSXz/2/