jQuery - Marca todas las casillas dentro de la tabla actual sólo

Question

Tengo dos repetidores anidadas en C#. El exterior tiene cierta información de agrupación y el interior tiene una tabla con un número X de casillas de verificación.

Así tendré Y número de mesas. En la parte superior de cada tabla, habrá una casilla de verificación (así como una casilla de verificación en cada fila). Lo que quiero hacer es poder seleccionar todas las casillas de verificación en una sola tabla de la casilla de verificación en la parte superior de cada tabla.

puedo seleccionar todas las casillas de una sola vez de la siguiente manera:

$(document).ready(function() { 
     $("#checkboxflipflop").click(function() { 
      var checked_status = this.checked; 
      $(".storecheckbox input").each(function() { 
       this.checked = checked_status; 
      }); 
     }); 
    }); 

No puedo encontrar la manera de limitar la selección de la tabla actual, (la casilla de verificación en la parte superior de cada tabla está en la fila th).

Gracias

EDIT .... lo siento olvidó mencionar que estamos en 1.26 de jQuery y no estoy seguro si se me permite movernos en absoluto. Lo que significa que "lo más cercano" no está allí.

Answer 1

algo como lo siguiente debería hacerlo

$('th input:checkbox').click(function(e) { 

var table = $(e.target).closest('table'); 
$('td input:checkbox', table).attr('checked', e.target.checked); 

}); 

Aquí hay un Working Demo con dos tablas anidadas en otra tabla (semánticamente horrible, lo admitiré). Añadir /editar a la URL para ver el código

EDIT:

Puesto que usted todavía está utilizando jQuery 1.2.6, utilice parents() en lugar de closest()

$('th input:checkbox').click(function(e) { 

var table = $(e.target).parents('table:first'); 
$('td input:checkbox', table).attr('checked', e.target.checked); 

}); 

Answer 2

$(this).closest("table").find("input:checkbox") 

Nota: Parece que todos los selectos-Todo-en-el-table-casillas tienen el mismo id, la id debe ser único dentro de la página, se debe utilizar una clase en su lugar. (O simplemente table th input)

Answer 3

Así que cada mesa tiene una casilla de verificación "marque todo", ¿verdad? ¿Por qué no darle una clase de .checkall? Posteriormente, se podría hacer esto (no probado):

$('.checkall').click(function(){ 
    var checked_status = this.checked; 
    $(this).closest('table').find('input:checkbox').each(function(){ 
    this.checked = checked_status; 
    }); 
}) 

Como alternativa, si no desea utilizar la clase .checkall, se utiliza un selector como:

$('.storecheckbox input:nth-child(1)').click` 

Significado, "cuando la primera entrada dentro de un elemento con el que se hace clic clase .storecheckbox ..."

Answer 4

He aquí el fragmento eso debería funcionar de acuerdo con su diseño actual de la página.

// iterate over all the tables in the page 
$("table").each(function() { 
    // attach a click event on the checkbox in the header in each of table 
    $(this).find("th:first input:checkbox").click(function() { 
     var val = this.checked; 
     // when clicked on a particular header, get the reference of the table & hence all the rows in that table, iterate over each of them. 
     $(this).parents("table").find("tr").each(function() { 
      // access the checkbox in the first column, and updates its value. 
      $(this).find("td:first input:checkbox")[0].checked = val; 
     }); 
    }); 
});