web-dev-qa-db-fra.com

jQuery Rechercher enfant case à cocher

J'ai une petite question jQuery: 

J'ai le type de table suivant:

<table id="my_table">
  <tr>
   <td><input type="checkbox" value="24"></td>
   <td> Click Here To Check The Box </td>
   <td> Or Click Here </td>
  </tr>
 </table>

Et dans jQuery, j'essaie de sélectionner la case à cocher correspondante dans la ligne sur laquelle l'utilisateur a cliqué.

 $("#my_table tr").click(function(e) { 
     $(this).closest(":checkbox").attr("checked", checked");
  });

Mais ce qui précède ne fonctionne pas. Des idées rapides sur la sélection de la case à cocher sur la ligne sur laquelle vous avez cliqué? Merci!

jquerycheckboxhtml-table
14
Dodinas

EDIT: MEILLEURE SOLUTION AT BOTTOM

En supposant qu'il n'y ait qu'une seule case à cocher, j'attacherais l'événement à td au lieu de tr:

$('#my_table td').click(function(e){
  $(this).parent().find('input:checkbox:first').attr('checked', 'checked');
});

Exemple

Si vous voulez pouvoir décocher la case également ...

$('#my_table td').click(function(e) {
    var $tc = $(this).parent().find('input:checkbox:first'),
        tv = $tc.attr('checked');

    $tc.attr('checked', !tv);
});

Cette fonction doit également être appliquée à la case à cocher pour annuler le comportement par défaut.

Exemple 2

EDIT: La solution la plus raisonnable est d’annuler la fonctionnalité si la cible est une entrée: http://jsfiddle.net/EXVYU/5/

var cbcfn = function(e) {
    if (e.target.tagName.toUpperCase() != "INPUT") {
        var $tc = $(this).parent().find('input:checkbox:first'),
            tv = $tc.attr('checked');
        $tc.attr('checked', !tv);
    }
};

$('#my_table td').live('click', cbcfn);
30
mVChr

La méthode jQuery la plus proche () recherche le parent le plus proche.

Vous voulez vraiment rechercher des enfants elemets, vous pouvez essayer ce qui suit:

 $("#my_table tr").click(function(e) { 
     $(":checkbox:eq(0)", this).attr("checked", "checked"); 
  });

fondamentalement, vous recherchez la première case à cocher dans la ligne

une référence

jQuery: sélecteur eq ()

......

4
John Hartsock
$("#my_table tr").click(function(e) {
    state= $(this).find(":checkbox:eq(0)").attr("checked");
    if (state==true){ // WITH TOGGLE
        $(this).find(":checkbox:eq(0)").removeAttr("checked");
    }else {
        $(this).find(":checkbox:eq(0)").attr("checked", "checked");
    }       
});

Je fais un script simple pour vérifier la première case à cocher dans tr . À propos de la bascule, je le fais juste pour essayer avant de poster cette réponse.

0
Joko Wandiro