Haga clic en las filas de la tabla para seleccionar la casilla de verificación usando jQuery

No dudes en divulgar nuestro espacio y códigos en tus redes, danos de tu ayuda para aumentar nuestra comunidad.

Solución:

Para seleccionar la casilla de verificación de una fila dentro de la tabla, primero verificaremos si el typeattribute del elemento al que nos dirigimos no es una casilla de verificación si no es una casilla de verificación, entonces marcaremos todas las casillas de verificación anidadas dentro de esa fila de la tabla.

$(document).ready(function() 
  $('.record_table tr').click(function(event) 
    if (event.target.type !== 'checkbox') 
      $(':checkbox', this).trigger('click');
    
  );
);

Manifestación

---

Si desea resaltar la fila de la tabla en checkboxchecked de lo que podemos usar un if condición con is(":checked")si es así, entonces encontramos el más cercano tr elemento usando .closest() y luego le agregamos clase usando addClass()

$("input[type='checkbox']").change(function (e) 
    if ($(this).is(":checked"))  //If the checkbox is checked
        $(this).closest('tr').addClass("highlight_row"); 
        //Add class on checkbox checked
     else 
        $(this).closest('tr').removeClass("highlight_row");
        //Remove class on checkbox uncheck
    
);

Manifestación

Esta pregunta me resultó útil, pero tuve un problema con la solución anterior. Si hace clic en un enlace en una celda de la tabla, activará la casilla de verificación. Busqué en Google esto y vi una propuesta para agregar un event.stopPropagation() en los enlaces de la tabla, así:

$('.record_table tr a').click(function(event) 
  event.stopPropagation();
);

Esta solución fue una mala idea porque tenía una ventana emergente jquery bootstrap en un enlace de la tabla…

Así que aquí hay una solución que me queda mejor. Por cierto, como estoy usando bootstrap 2.3, el resaltado de la línea se realiza agregando la clase “info” al tr. Para usar este código, solo necesita agregar class="selectable" a la etiqueta de la tabla.

$(".selectable tbody tr input[type=checkbox]").change(function(e)
  if (e.target.checked)
    $(this).closest("tr").addClass("info");
  else
    $(this).closest("tr").removeClass("info");
);

$(".selectable tbody tr").click(function(e)
  if (e.target.type != 'checkbox' && e.target.tagName != 'A')
    var cb = $(this).find("input[type=checkbox]");
    cb.trigger('click');
  
);

Probablemente querrá ser más específico con la condición de prueba, por ejemplo, si tiene otras entradas en la fila.

Activar un clic como muchas de las soluciones proporcionadas anteriormente hará que la función se ejecute dos veces. Actualice el valor de prop en su lugar:

$('tr').click(function(event)
  alert('function runs twice');
  if(event.target.type !== 'checkbox')
    //$(':checkbox', this).trigger('click');
    // Change property instead
    $(':checkbox', this).prop('checked', true);
  
);

Enlace al ejemplo jsfiddle aquí

Puntuaciones y comentarios

Puedes ayudar nuestro quehacer añadiendo un comentario o dejando una puntuación te estamos eternamente agradecidos.

---

---

Utiliza Nuestro Buscador