Skip to main content
se añadieron 213 caracteres en el cuerpo
Origen Enlace
Chofoteddy
  • 6.2k
  • 7
  • 30
  • 65

Nota: Añadí la columna edad para ver tener visibilidad sobre la funcionalidad del snippet.

Tu solución quedaría como la siguiente:

/**
 * El siguiente código captura el click realizado sobre
 * o en elementos hijos de las filas (tr). Una vez activo
 * buscamos los hermanos para remover la clase «selected»,
 * volvemos a la fila para buscar el «input» y seleccionarlo.
 */
$('.table tbody tr').on('click', function (e) {
  var val = $(this)
              .addClass('selected')
              .siblings()
              .removeClass('selected')
              .end()
              .find('input[type="radio"]')
              .prop('checked', true)
              .val();
  
  alert('El nuevo valor seleccionado es: '+ val);
});
.table tbody tr:hover {
  background-color: gray;
  cursor: pointer;
}

.table tbody tr.selected {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" class="table">
  <thead>
    <tr>
      <th></th>
      <th>Nombre</th>
      <th>Edad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input name="intereses" type="radio" value="1" /></td>
      <td>Persona 1</td>
      <td>18</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="2" /></td>
      <td>Persona 2</td>
      <td>40</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="3" /></td>
      <td>Persona 3</td>
      <td>31</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="4" /></td>
      <td>Persona 4</td>
      <td>23</td>
    </tr>
  </tbody>
</table>

Tu solución quedaría como la siguiente:

/**
 * El siguiente código captura el click realizado sobre
 * o en elementos hijos de las filas (tr). Una vez activo
 * buscamos los hermanos para remover la clase «selected»,
 * volvemos a la fila para buscar el «input» y seleccionarlo.
 */
$('.table tbody tr').on('click', function (e) {
  var val = $(this)
              .addClass('selected')
              .siblings()
              .removeClass('selected')
              .end()
              .find('input[type="radio"]')
              .prop('checked', true)
              .val();
  
  alert('El nuevo valor seleccionado es: '+ val);
});
.table tbody tr:hover {
  background-color: gray;
  cursor: pointer;
}

.table tbody tr.selected {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" class="table">
  <thead>
    <tr>
      <th></th>
      <th>Nombre</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input name="intereses" type="radio" value="1" /></td>
      <td>Persona 1</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="2" /></td>
      <td>Persona 2</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="3" /></td>
      <td>Persona 3</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="4" /></td>
      <td>Persona 4</td>
    </tr>
  </tbody>
</table>

Nota: Añadí la columna edad para ver tener visibilidad sobre la funcionalidad del snippet.

Tu solución quedaría como la siguiente:

/**
 * El siguiente código captura el click realizado sobre
 * o en elementos hijos de las filas (tr). Una vez activo
 * buscamos los hermanos para remover la clase «selected»,
 * volvemos a la fila para buscar el «input» y seleccionarlo.
 */
$('.table tbody tr').on('click', function (e) {
  var val = $(this)
              .addClass('selected')
              .siblings()
              .removeClass('selected')
              .end()
              .find('input[type="radio"]')
              .prop('checked', true)
              .val();
  
  alert('El nuevo valor seleccionado es: '+ val);
});
.table tbody tr:hover {
  background-color: gray;
  cursor: pointer;
}

.table tbody tr.selected {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" class="table">
  <thead>
    <tr>
      <th></th>
      <th>Nombre</th>
      <th>Edad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input name="intereses" type="radio" value="1" /></td>
      <td>Persona 1</td>
      <td>18</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="2" /></td>
      <td>Persona 2</td>
      <td>40</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="3" /></td>
      <td>Persona 3</td>
      <td>31</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="4" /></td>
      <td>Persona 4</td>
      <td>23</td>
    </tr>
  </tbody>
</table>

se añadieron 159 caracteres en el cuerpo
Origen Enlace
Chofoteddy
  • 6.2k
  • 7
  • 30
  • 65

Tu solución quedaría como la siguiente:

/**
 * El siguiente código captura el click realizado sobre
 * o en elementos hijos de las filas (tr). Una vez activo
 * buscamos los hermanos para remover la clase «selected»,
 * volvemos a la fila para buscar el «input» y seleccionarlo.
 */
$('.table tbody tr').on('click', function (e) {
  var val = $(this)
              .addClass('selected')
              .siblings()
              .removeClass('selected')
              .end()
              .find('input[type="radio"]')
              .prop('checked', true)
    .end()
          .siblingsval();
   
  .removeClassalert('selected''El nuevo valor seleccionado es: '+ val);
});
.table tbody tr:hover {
  background-color: gray;
  cursor: pointer;
}

.table tbody tr.selected {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" class="table">
  <thead>
    <tr>
      <th></th>
      <th>Nombre</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input name="intereses" type="radio" value="1" /></td>
      <td>Persona 1</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="2" /></td>
      <td>Persona 2</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="3" /></td>
      <td>Persona 3</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="4" /></td>
      <td>Persona 4</td>
    </tr>
  </tbody>
</table>

Tu solución quedaría como la siguiente:

$('.table tbody tr').on('click', function (e) {
  $(this)
    .addClass('selected')
    .find('input[type="radio"]')
    .prop('checked', true)
    .end()
    .siblings()
    .removeClass('selected');
});
.table tbody tr:hover {
  background-color: gray;
  cursor: pointer;
}

.table tbody tr.selected {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" class="table">
  <thead>
    <tr>
      <th></th>
      <th>Nombre</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input name="intereses" type="radio" value="1" /></td>
      <td>Persona 1</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="2" /></td>
      <td>Persona 2</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="3" /></td>
      <td>Persona 3</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="4" /></td>
      <td>Persona 4</td>
    </tr>
  </tbody>
</table>

Tu solución quedaría como la siguiente:

/**
 * El siguiente código captura el click realizado sobre
 * o en elementos hijos de las filas (tr). Una vez activo
 * buscamos los hermanos para remover la clase «selected»,
 * volvemos a la fila para buscar el «input» y seleccionarlo.
 */
$('.table tbody tr').on('click', function (e) {
  var val = $(this)
              .addClass('selected')
              .siblings()
              .removeClass('selected')
              .end()
              .find('input[type="radio"]')
              .prop('checked', true)
              .val();
   
  alert('El nuevo valor seleccionado es: '+ val);
});
.table tbody tr:hover {
  background-color: gray;
  cursor: pointer;
}

.table tbody tr.selected {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" class="table">
  <thead>
    <tr>
      <th></th>
      <th>Nombre</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input name="intereses" type="radio" value="1" /></td>
      <td>Persona 1</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="2" /></td>
      <td>Persona 2</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="3" /></td>
      <td>Persona 3</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="4" /></td>
      <td>Persona 4</td>
    </tr>
  </tbody>
</table>

Origen Enlace
Chofoteddy
  • 6.2k
  • 7
  • 30
  • 65

Tu solución quedaría como la siguiente:

$('.table tbody tr').on('click', function (e) {
  $(this)
    .addClass('selected')
    .find('input[type="radio"]')
    .prop('checked', true)
    .end()
    .siblings()
    .removeClass('selected');
});
.table tbody tr:hover {
  background-color: gray;
  cursor: pointer;
}

.table tbody tr.selected {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" class="table">
  <thead>
    <tr>
      <th></th>
      <th>Nombre</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input name="intereses" type="radio" value="1" /></td>
      <td>Persona 1</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="2" /></td>
      <td>Persona 2</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="3" /></td>
      <td>Persona 3</td>
    </tr>
    <tr>
      <td><input name="intereses" type="radio" value="4" /></td>
      <td>Persona 4</td>
    </tr>
  </tbody>
</table>