case jquery cliquez sur

Question

ont une table

<table> 
    <tr class="c1"><td><input type="checkbox" name="tableRow[]"></td>......</tr> 
    <tr class="c2"><td><input type="checkbox" name="tableRow[]"></td>......</tr> 
    <tr class="c1"><td><input type="checkbox" name="tableRow[]"></td>......</tr> 
... 
</table> 

et les js est:

$('input:checkbox[name*=tableRow]').click(function(event) { 

    var el = $(this); 
    if (el.attr('checked')) { 
     el.parents('tr').css("background-color", '#ffcccc'); 
    } 
    else { 
     el.parents('tr').css("background-color", 'inherit'); 
    } 
    event.stopPropagation(); 
}); 

$('input:checkbox[name*=tableRow]').parents('tr').click(function() { 
    var el = $(this).find('> td:eq(0) > :checkbox'); 
    el.click(); 
});​ 

contrôles de cases à cocher et décoche dans les deux sens, mais quand je clique sur « tr » il semble que rans d'événements avant vérifier l'ensemble.

besoin: dans les deux ckecks mis alors css

Answer 1

Voici un exemple de travail: jsFiddle

Notez que vous devez utiliser la balise d'étiquette avec l'attribut « pour » afin d'obtenir un code plus convivial W3C.

$('input:checkbox[name*=tableRow]').click(function (event) { 

      var el = $(this); 
      test(el);  
    }); 

    $('input:checkbox[name*=tableRow]').parents('tr').click(function() { 
     var el = $(this).find(':checkbox'); 
     el.attr('checked', !el.attr('checked')); 
     test(el); 
    }); 

function test(el){ 
     if (el.is(':checked')) { 
       el.parents('tr').css("background-color", '#ffcccc'); 
      } 
      else { 
       el.parents('tr').css("background-color", 'inherit'); 
      } 
      event.stopPropagation(); 

} 

Answer 2

Changement à ceci:

$('input:checkbox[name*=tableRow]').change(function(event) { ... }); 

Et au lieu de el.attr('checked') utilisation el.is(':checked');

Voir cette démo http://jsfiddle.net/S9L7C/