Dev Faq
0
votes

JQuery Vérifiez décocher des rangées de table sauf cliquer sur Entrée enfant

Pour une table simple, j'essaie d'obtenir cela pour travailler en utilisant jQuery:

  • En cliquant sur une ligne de contrôle / décoque une case à cocher Entrée enfant TD
  • En cliquant sur la case à cocher Entrée enfant elle-même fonctionne aussi bien

    La première fonctionne, mais la seconde ne pas - chaque fois que je clique sur la case à cocher elle-même, il ne fait rien. J'ai essayé de supprimer le gestionnaire d'événements en utilisant () mais je ne pouvais pas le faire fonctionner correctement.

    html xxx

    jQuery xxx

    échantillon Jsfiddle .

    Tout conseil est très apprécié. Merci!

1 commentaires

Si votre exigence ne vous oblige pas à utiliser TD, vous pouvez ajouter une étiquette avec l'attribut pour en faisant référence à l'ID de la case à cocher. De cette façon, vous pouvez éviter entièrement le code JQuery. <étiquette pour = "Vérifier"> première ligne 13

4 Réponses :

2
votes

Vous essayez de vérifier ici la case déjà cochée ici (!), cela le rend décoché.

Lorsque vous cliquez directement sur la case à cocher, il sera coché par défaut, aucun déclenchement manuel n'est nécessaire. Mais comme vous capturez l'événement TR, il est déclenché chaque fois que vous cliquez sur la case à la case. P>

Pour éviter cela, capturez l'événement sur TD, P> 

$(this).siblings().find('input')

0 commentaires
1
votes

Lorsque vous cliquez sur Cochez la case CODE> Il déclenchera deux événements. Tout d'abord sera par défaut cliquez sur code> à partir de Cochez la case code> et d'un autre que vous avez affecté à tr code>. Vous pouvez donc vérifier que si cible code> est la case code> ou non. Si c'est Cochez la case Code>, n'effectuez pas $ coquebox.prop ("coché",! $ Cochez la case.prop ("coché")); >.

Vous pouvez vérifier qu'avec la condition en dessous. p>

event.target.type! = "Cochez la case" code> p>

Vous devez ajouter code> paramètre code> Fonction de rappel comme ci-dessous. p>

$ ("# i-table TRBO TROD TRO"). Cliquez sur (Fonction (Evénement) {...} CODE> P>

You Le code complet sera comme ci-dessous. p>

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table id="i-table">

  <tbody>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>First row</td>
      <td>13</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Second row</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

2 commentaires

Émervée par la rapidité avec laquelle cela a été répondu et avec des solutions même différentes, appréciez vraiment ça!

J'aime cette réponse car cela me permet de détecter si ma cible de clic est une case à cocher, je ne savais pas comment faire cela. Je ne comprends pas tout à fait la mécanisie de rappel (vérifié ici w3schools.com/jquery/jquery_callback.asp ). Le event.target.type est nouveau pour moi, j'aurais pensé que c'est une syntaxe JS, mais je vois que c'est en fait Dom. Beaucoup plus d'apprendre à venir, il semble!

2
votes

Essayez avec une approche ci-dessous ou vous pouvez détecter la case à cocher ou l'entrée Cliquez sur: strong>

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="i-table">

  <tbody>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>First row</td>
      <td>13</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Second row</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

0 commentaires
1
votes

Lorsque vous cliquez sur la case Cochez la case, cliquez sur l'événement sur la case à cocher elle-même, puis sur son parent - TD code>, puis tr code>. Donc, d'abord, l'entrée est vérifiée, mais est alors décochée immédiatement. La solution consiste à arrêter la propagation de l'événement en cliquant sur la case à cocher. 

$(document).ready(function() {
  //clicking table rows checks or unckecks boxes    
  $("#i-table tbody tr").click(function() {
    var $checkbox = $(this).find("input");
    $checkbox.prop("checked", !$checkbox.prop("checked"));
  });
  $("#i-table tbody tr td input").click(function(e) {
    // prevent click event on parents
    e.stopPropagation();
  })
});

0 commentaires

Articles qui pourrait vous intéresser :

Select2 ne s'affiche pas correctement dans le mode bootstrap
datetimepicker ne fonctionne pas avec bootstrap 4?
L'appel Ajax n'affiche pas de réponse en cas de succès
django admin - Comment ajouter du javascript à la fin d'un fichier