Cliquez sur les lignes de la table pour sélectionner la case à cocher à l'aide de jQuery

Que je n'ai pas trouvé question posée avant, sur la façon de bascule case cliquez sur une ligne du tableau, donc je voudrais partager mon approche de cette...

InformationsquelleAutor Mr. Alien | 2013-08-18

80

Pour sélectionner la case à cocher d'une ligne à l'intérieur de la table, nous allons d'abord vérifier si l' type attribute de l'élément que nous ciblent n'est pas une case à cocher si ce n'est pas une case à cocher que nous vous cochez toutes les cases imbriquée à l'intérieur de cette ligne de la table.
```
$(document).ready(function() {
  $('.record_table tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });
});
```
Démo

Si vous souhaitez mettre en surbrillance la ligne de la table sur checkbox checked que nous pouvons utiliser un if condition avec is(":checked"), si oui que nous trouvons le plus proche tr élément à l'aide de .closest() et que nous avons ajouter une classe à l'aide de addClass()
```
$("input[type='checkbox']").change(function (e) {
    if ($(this).is(":checked")) { //If the checkbox is checked
        $(this).closest('tr').addClass("highlight_row"); 
        //Add class on checkbox checked
    } else {
        $(this).closest('tr').removeClass("highlight_row");
        //Remove class on checkbox uncheck
    }
});
```
Démo
- Excellente solution, mais il y a un léger problème (mineur), la case est à l'intérieur des étiquettes (pour les css), de toute jquery solution de contournement, vous en êtes conscient? Dernier recours est d'enlever les étiquettes et de les mettre tous à 'span class="label" ou quelque chose et mise à jour de css. Merci si vous obtenez autour de ce ou pas 🙂
- superbe.. votre solution sauvé beaucoup de temps
- GG. Un bon morceau de script. Merci @M. Exotiques!
InformationsquelleAutor Mr. Alien
7

Cette question a été utile pour moi, mais j'ai eu un problème avec la solution précédente. Si vous cliquez sur un lien dans une cellule de tableau, il va déclencher la case à cocher inverser.
J'ai googlé ce et j'ai vu une proposition visant à ajouter un event.stopPropagation() sur les liens du tableau, comme ceci:
```
$('.record_table tr a').click(function(event) {
  event.stopPropagation();
});
```
Cette solution était une mauvaise idée parce que j'avais un peu de jquery bootstrap liste sur un lien de la table...

Voici donc une des solutions qui me correspond mieux. Par le chemin que je suis en utilisant bootstrap 2.3, le point culminant de la ligne est faite par l'ajout de la "info" de la classe à la tr.
Pour utiliser ce code, vous avez juste besoin d'ajouter class="selectable" de la balise table.
```
$(".selectable tbody tr input[type=checkbox]").change(function(e){
  if (e.target.checked)
    $(this).closest("tr").addClass("info");
  else
    $(this).closest("tr").removeClass("info");
});

$(".selectable tbody tr").click(function(e){
  if (e.target.type != 'checkbox' && e.target.tagName != 'A'){
    var cb = $(this).find("input[type=checkbox]");
    cb.trigger('click');
  }
});
```
Vous aurez probablement envie d'être plus précis avec le test de la condition, par exemple si vous avez d'autres entrées dans la ligne.

InformationsquelleAutor Jérémie
4

Déclencher un clic comme la plupart des solutions proposées ci-dessus entraînera la fonction à exécuter deux fois. Mise à jour de l'hélice de la valeur plutôt:
```
$('tr').click(function(event){
  alert('function runs twice');
  if(event.target.type !== 'checkbox'){
    //$(':checkbox', this).trigger('click');
    //Change property instead
    $(':checkbox', this).prop('checked', true);
  }
});
```
Lien vers jsfiddle exemple ici
- pourquoi la fonction s'exécute deux fois ?
- bonne question. Lorsqu'un événement se produit sur un élément, il s'exécute en premier les gestionnaires sur elle, puis sur celle du parent, & ainsi de suite. Dans cette mise en œuvre, la fonction ne fonctionne pas deux fois quand l'entrée case est cliqué directement (vous remarquerez mon jsfiddle exp), mais la norme de conception d'INTERFACE utilisateur accepte des événements (comme la souris) sur des colonnes ou des lignes pour la définition d'une propriété sur un élément (comme les valeurs ou les styles). Si le déclencheur sur la mise en œuvre de cette manière les causes de la fonction à exécuter deux fois – voir de Propagation. Bonne visual rep de ce qui se passe: javascript.info/bubbling-and-capturing
- Vraiment belle explication, merci monsieur (y)
InformationsquelleAutor CR Rollyson

Vous pouvez simplement déclencher cet événement click...:)

  $(document).ready(function()
    {
      $("table tr th :checkbox").click(function(event)
      {
        $('tbody :checkbox').trigger('click');
      });
    });

  $(document).ready(function()
    {
      $("table tr th :checkbox").on('click',function(event)
      {
        $('tbody :checkbox').trigger('click');
      });
    });

InformationsquelleAutor Kalpesh Desai

0

Même si l'on a accepté @M. Alien réponse fonctionne très bien, il ne fonctionne pas dans le cas où vous décidez d'ajouter une nouvelle <tr> ligne de façon dynamique avec jQuery à un certain point.

Je recommande d'utiliser un événement délégation approche, qui est juste une légère modification de la accepté de répondre.

Au lieu de:

... $('.record_table tr').click(function(event) { ...

utilisation

... $('.record_table').on('click', 'tr', function(event) { ...

Et de même pour la mise en évidence, utilisation:

... $(".record_table").on('change', "input[type='checkbox']", function (e) { ...

Plus d'infos ici: Cliquez sur événement n'a pas de feu pour les lignes de la table ajoutés dynamiquement

InformationsquelleAutor WojtylaCz

Vous devez vous connecter pour publier un commentaire.