2011-02-02 21 views
12

Ho una domanda veloce jQuery:jQuery Trova bambino Casella

Ho la seguente tipo di tabella:

<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> 

E in jQuery, sto tentando di selezionare la casella di controllo corrispondente a quella riga che era cliccato.

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

Ma quanto sopra non funziona. Qualche idea rapida sulla selezione della casella sulla riga su cui è stato fatto clic? Grazie!

risposta

27

EDIT: MIGLIORE SOLUZIONE In fondo

Supponendo che c'è solo una casella di controllo, vorrei collegare l'evento al td posto del tr:

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

Example

Se si vuole essere in grado di deselezionare la casella di controllo ...

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

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

Questa funzione deve essere applicata al ckbox per negare il comportamento predefinito.

Example 2

EDIT: La soluzione è metodo più ragionevole è annullare la funzionalità se la destinazione è un ingresso: 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); 
+0

Grazie mVChr. Ottimi collegamenti all'esempio e mi piace anche l'abilità di deselezionare. Saluti! – Dodinas

+0

In realtà, ho appena avuto una domanda aggiornata. Ho notato che in questo esempio non puoi nemmeno cliccare sulla "casella di controllo" stessa. Un modo per aggirare questo? – Dodinas

+0

Esaminare nuovamente l'esempio 2. L'ho risolto. – mVChr

4

Il metodo jQuery closest() trova il genitore più vicino.

Sei sicuro di voler cercare elemets bambino, è possibile provare i seguenti:

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

fondamentalmente si sta cercando per la prima casella di controllo si trova nella riga della tabella

qualche riferimento

jQuery :eq() selector

......

-1

provare questo anche ...

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

Questo è semplicemente sbagliato quando il metodo jQuery closest() funziona sull'albero DOM. Significa che troverà il genitore più vicino –

+0

ok..grazie per indicare questo !!! – Vivek

0
$("#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"); 
    }  
}); 

Faccio semplice script per verificare la prima casella di controllo in tr specifico. su toggle lo faccio solo per provare prima di pubblicare questa risposta.