0

Estoy intentando solo seleccionar un checkbox a la vez que se encuentra dentro de una table y obtener los datos de la fila. Este es mi table:

<div class="table-container">
  <table class="table table-hover table-custom border-radius-total-5 no-margin" id="tablelistaReservas">
    <thead class="backGris-light-be">
      <tr class="s20">
        <th class="no-borders">RESERVACION</th>
        <th class="no-borders">NOMBRE</th>
        <th class="no-borders">LOC_EXTERNO</th>
        <th class="no-borders">PICKUP</th>
        <th class="no-borders">RETURN</th>
        <th class="no-borders">CANAL</th>
        <th class="no-borders">AUTO</th>
        <th class="no-borders"></th>
      </tr>
    </thead>
    <tbody class="backWhite">
      <tr class="s18 colorGrayLight">
        <td class="no-pad-top no-pad-bot align-middle">1</td>
        <td class="no-pad-top no-pad-bot align-middle">Pedro Canche Angulo</td>
        <td class="no-pad-top no-pad-bot align-middle">34577567856</td>
        <td class="no-pad-top no-pad-bot align-middle">28/may/2018</td>
        <td class="no-pad-top no-pad-bot align-middle">30/mayo/2018</td>
        <td class="no-pad-top no-pad-bot align-middle">Web</td>
        <td class="no-pad-top no-pad-bot align-middle">Jetta</td>
        <td class="no-pad-top no-pad-bot align-middle">
          <div class="margin-l-15 checkbox checkboxStyle-table checkColorGreenLight">
            <input type="checkbox" class="tableid" name="tableid" id="tableid" class="click">
            <label class="s18 text-normal"></label>
          </div>
        </td>
      </tr>
      <tr class="s18 colorGrayLight">
        <td class="no-pad-top no-pad-bot align-middle">2</td>
        <td class="no-pad-top no-pad-bot align-middle">Pablo Canche Angulo</td>
        <td class="no-pad-top no-pad-bot align-middle">34577567856</td>
        <td class="no-pad-top no-pad-bot align-middle">28/may/2018</td>
        <td class="no-pad-top no-pad-bot align-middle">30/mayo/2018</td>
        <td class="no-pad-top no-pad-bot align-middle">Web</td>
        <td class="no-pad-top no-pad-bot align-middle">Jetta</td>
        <td class="no-pad-top no-pad-bot align-middle">
          <div class="margin-l-15 checkbox checkboxStyle-table checkColorGreenLight">
            <input type="checkbox" class="tableid" name="tableid" id="tableid" class="click">
            <label class="s18 text-normal"></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

No he podido realizar dicha funcionalidad. Espero su ayuda con alguno link de como lo puedo hacer.

2 respuestas 2

4

Con el evento change podemos controlar los cambios de valor de los elementos de formulario, en este caso tus checkbox, simplemente vamos a preguntar que cuando un checkbox esté activo automáticamente el resto se desactiven y se muestre la información de los elementos correspondientes a la fila a la cual pertenece el checkbox activo.

Ahora para capturar dicha información lo que haremos es seleccionar el tr al cual pertenece el checkbox y luego vamos capturando uno a uno el contenido de cada td.

$(document).ready(function(){
    $('input[type="checkbox"]').change(function(){
        if($(this).is(':checked')){
            $('input[type="checkbox"]').not(this).prop('checked', false);
            
            var tr = $(this).closest('tr');
            
            var reservacion =$(tr).find('td:nth-child(1)').text();
            var nombre = $(tr).find('td:nth-child(2)').text();
            var loc_externo = $(tr).find('td:nth-child(3)').text();
            var pickup = $(tr).find('td:nth-child(4)').text();
            var retorno =$(tr).find('td:nth-child(5)').text();
            var canal = $(tr).find('td:nth-child(6)').text();
            var auto = $(tr).find('td:nth-child(7)').text();
             
            console.log('reservacion: ' + reservacion + ' - nombre: ' + nombre + ' - loc_externo: ' + loc_externo + ' - pickup: ' + pickup + ' - retorno: ' + retorno + ' - canal: ' + canal + ' - auto:' + auto);
        }
    })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="table-container">
<table class="table table-hover table-custom border-radius-total-5 no-margin" id="tablelistaReservas">
<thead class="backGris-light-be">
    <tr class="s20">
      <th class="no-borders">RESERVACION</th>
      <th class="no-borders">NOMBRE</th>
      <th class="no-borders">LOC_EXTERNO</th>
      <th class="no-borders">PICKUP</th>
      <th class="no-borders">RETURN</th>
      <th class="no-borders">CANAL</th>
      <th class="no-borders">AUTO</th>
      <th class="no-borders"></th>
    </tr>
</thead>
<tbody class="backWhite">
  <tr class="s18 colorGrayLight">
    <td class="no-pad-top no-pad-bot align-middle">1</td>
    <td class="no-pad-top no-pad-bot align-middle">Pedro Canche Angulo</td>
    <td class="no-pad-top no-pad-bot align-middle">34577567856</td>
    <td class="no-pad-top no-pad-bot align-middle">28/may/2018</td>
    <td class="no-pad-top no-pad-bot align-middle">30/mayo/2018</td>
    <td class="no-pad-top no-pad-bot align-middle">Web</td>
    <td class="no-pad-top no-pad-bot align-middle">Jetta</td>
    <td class="no-pad-top no-pad-bot align-middle">
    <div class="margin-l-15 checkbox checkboxStyle-table checkColorGreenLight">
      <input type="checkbox" class="tableid" name="tableid" id="tableid" class="click">
      <label class="s18 text-normal"></label>
    </div>
    </td>
  </tr>
  <tr class="s18 colorGrayLight"> 
    <td class="no-pad-top no-pad-bot align-middle">2</td>
    <td class="no-pad-top no-pad-bot align-middle">Pablo Canche Angulo</td>
    <td class="no-pad-top no-pad-bot align-middle">34577567856</td>
    <td class="no-pad-top no-pad-bot align-middle">28/may/2018</td>
    <td class="no-pad-top no-pad-bot align-middle">30/mayo/2018</td>
    <td class="no-pad-top no-pad-bot align-middle">Web</td>
    <td class="no-pad-top no-pad-bot align-middle">Jetta</td>
    <td class="no-pad-top no-pad-bot align-middle">
    <div class="margin-l-15 checkbox checkboxStyle-table checkColorGreenLight">
      <input type="checkbox" class="tableid" name="tableid" id="tableid" class="click">
      <label class="s18 text-normal"></label>
    </div>
    </td>
  </tr>
</tbody>
</table>
</div>

<div id="mensaje"></div>

2
  • muchas gracias por tu aporte me funciono totalmente. Saludos.
    – perrukozsh
    Commented el 29 may. 2018 a las 14:21
  • @PedroMisaelCancheAngulo me alegra que te haya servido, te invito a considerar marcar la respuesta como aceptada para finalizar la pregunta y que futuros desarrolladores se vean beneficiados con la solución, saludos! Commented el 29 may. 2018 a las 14:24
1

Por partes:

  1. Tus checkboxes deberían tener un id único. En este caso tienes los dos con el id="tableid"

  2. Viendo la etiqueta de la pregunta entiendo que estás utilizando jQuery, ¿no?

En ese caso podrías asignar el evento click a los checkboxes que empiecen por un id concreto (por ejemplo "chk_").

  1. ¿Qué información de la tabla quieres obtener?

Siguiendo con jQuery puedes buscar la fila (tr) más cercana al checkbox con el método closest("tr")

  1. Seleccionar sólo un checkbox:

$("input[id^='chk_']").not(this).prop('checked', false);

Te dejo un ejemplo con todo esto:

$(function(){

$("input[id^='chk_']").on("click",function(){

   $('input[type="checkbox"]').not(this).prop('checked', false);

   if($(this).is(':checked'))
   {
      obtenerFila(this);
   }
});

});

function obtenerFila(ctl)
{
	alert($(ctl.closest("tr")).html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-container">
<table class="table table-hover table-custom border-radius-total-5 no-margin" id="tablelistaReservas">
<thead class="backGris-light-be">
    <tr class="s20">
      <th class="no-borders">RESERVACION</th>
      <th class="no-borders">NOMBRE</th>
      <th class="no-borders">LOC_EXTERNO</th>
      <th class="no-borders">PICKUP</th>
      <th class="no-borders">RETURN</th>
      <th class="no-borders">CANAL</th>
      <th class="no-borders">AUTO</th>
      <th class="no-borders"></th>
    </tr>
</thead>
<tbody class="backWhite">
  <tr class="s18 colorGrayLight">
    <td class="no-pad-top no-pad-bot align-middle">1</td>
    <td class="no-pad-top no-pad-bot align-middle">Pedro Canche Angulo</td>
    <td class="no-pad-top no-pad-bot align-middle">34577567856</td>
    <td class="no-pad-top no-pad-bot align-middle">28/may/2018</td>
    <td class="no-pad-top no-pad-bot align-middle">30/mayo/2018</td>
    <td class="no-pad-top no-pad-bot align-middle">Web</td>
    <td class="no-pad-top no-pad-bot align-middle">Jetta</td>
    <td class="no-pad-top no-pad-bot align-middle">
    <div class="margin-l-15 checkbox checkboxStyle-table checkColorGreenLight">
      <input type="checkbox" class="tableid" name="tableid" id="chk_1" class="click">
      <label class="s18 text-normal"></label>
    </div>
    </td>
  </tr>
  <tr class="s18 colorGrayLight"> 
    <td class="no-pad-top no-pad-bot align-middle">2</td>
    <td class="no-pad-top no-pad-bot align-middle">Pablo Canche Angulo</td>
    <td class="no-pad-top no-pad-bot align-middle">34577567856</td>
    <td class="no-pad-top no-pad-bot align-middle">28/may/2018</td>
    <td class="no-pad-top no-pad-bot align-middle">30/mayo/2018</td>
    <td class="no-pad-top no-pad-bot align-middle">Web</td>
    <td class="no-pad-top no-pad-bot align-middle">Jetta</td>
    <td class="no-pad-top no-pad-bot align-middle">
    <div class="margin-l-15 checkbox checkboxStyle-table checkColorGreenLight">
      <input type="checkbox" class="tableid" name="tableid" id="chk_2" class="click">
      <label class="s18 text-normal"></label>
    </div>
    </td>
  </tr>
</tbody>
</table>
</div>

1
  • Muchas gracias por explicación. Saludos.
    – perrukozsh
    Commented el 29 may. 2018 a las 14:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.