2011-02-02 16 views
12

Tengo una pregunta rápida jQuery:jQuery Encuentra Casilla niño

tengo el siguiente tipo de tabla:

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

Y en jQuery, intento para seleccionar la casilla de verificación correspondiente de esa fila que era clickeado

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

Pero lo anterior no está funcionando. ¿Alguna idea rápida sobre cómo seleccionar la casilla de verificación en la fila en la que se hizo clic? ¡Gracias!

Respuesta

27

EDIT: MEJOR SOLUCIÓN EN LA PARTE INFERIOR

Suponiendo que sólo hay una casilla de verificación, que uniría el evento a la td en lugar de la tr:

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

Example

Si quieren ser capaces de desactive la casilla de verificación, así ...

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

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

necesita esta función que se aplica a la che ckbox también para negar el comportamiento predeterminado.

Example 2

EDIT: La solución es el método más razonable es cancelar la funcionalidad si el objetivo es una entrada: 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

Gracias mVChr. Excelentes enlaces al ejemplo, y me gusta también la posibilidad de desmarcar. ¡Aclamaciones! – Dodinas

+0

En realidad, acabo de tener una pregunta actualizada. Noté que en este ejemplo, ni siquiera puedes hacer clic en la "casilla de verificación". ¿Alguna forma de evitar esto? – Dodinas

+0

Mire el ejemplo 2 nuevamente. Lo arreglé – mVChr

4

El método jQuery closest() encuentra el elemento primario más cercano.

Usted realmente desea buscar elemets hijo, puede intentar lo siguiente:

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

, básicamente, que está en busca de la primera casilla de verificación que se encuentra en la fila de tabla

alguna referencia

jQuery :eq() selector

......

-1

probar esto también ...

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

Esto es simplemente incorrecto ya que el método jQuery closer() funciona en el árbol DOM. Esto significa que encontrará el padre más cercano que coincide –

+0

ok ... gracias por señalar esto !!! – 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"); 
    }  
}); 

Realizo una secuencia de comandos simple para marcar la primera casilla de verificación en tr específica. sobre alternar solo lo hago para intentar antes de publicar esta respuesta.

Cuestiones relacionadas