En mi código, cuando haces clic en el primer <td>, se selecciona su casilla de verificación. Pero mi objetivo es checkbox debería seleccionarse mediante tr clic. Entonces, cuando hago clic en cualquier <tr>, se seleccionará checkbox. Para hacer esto, ya intenté reemplazar en la clase de clic ".checktd" a ".odd" pero esto no funciona.

¿Alguna idea de cómo puedo lograr eso?

$(".checktd").on("click", function(e) {
  if (this != e.target) {
    return;
  }
  var check = $(this).find("input[type=checkbox]");
  check.prop('checked', !check[0].checked);
});
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
  text-align: left;
}
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <table style="width:40%">
    <tr>
      <th>Check</th>
      <th>Name</th>
      <th>Telephone</th>
    </tr>
    <tr class="odd">
      <td class="checktd"><input type="checkbox" class="checkItem"></td>
      <td>Bill Gates</td>
      <td>55577854</td>
    </tr>
    <tr class="odd">
      <td class="checktd"><input type="checkbox" name="checkItem"></td>
      <td>Kevin Gates</td>
      <td>544444</td>
    </tr>
  </table>
</body>

</html>

JsFiddle si es necesario.

0
Kevin himch 28 feb. 2018 a las 08:40

4 respuestas

La mejor respuesta
  • Modifique el this!=e.target y verifique si es una casilla de verificación o no.

  • Cambie su selector de ".checktd" a "table tr". Te sugiero que uses un selector más específico agregando clase en table o en tr.

$("table tr").on("click", function(e) {
  if($(e.target).is("input[type='checkbox']"))
    return;
  var check = $(this).find("input[type=checkbox]");
  check.prop('checked', !check[0].checked);
});
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
  text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:40%">
  <tr>
    <th>Check</th>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr class="odd">
    <td class="checktd"><input type="checkbox" class="checkItem"></td>
    <td>Bill Gates</td>
    <td>55577854</td>
  </tr>
  <tr class="odd">
    <td class="checktd"><input type="checkbox" name="checkItem"></td>
    <td>Kevin Gates</td>
    <td>544444</td>
  </tr>
</table>
2
void 28 feb. 2018 a las 05:57

Al hacer clic en tr, encuentre el elemento input con el atributo name y verifique si es checked. Si está marcada, desactívela usando prop más viceversa

$("tr").on("click", function(e) {
  if ($(this).find('input[name="checkItem"]')[0].checked) {

    $(this).find('input[name="checkItem"]').prop('checked', false)
  } else {
    $(this).find('input[name="checkItem"]').prop('checked', true)

  }
});
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
  text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:40%">
  <tr>
    <th>Check</th>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr class="odd">
    <td class="checktd"><input type="checkbox" name="checkItem"></td>
    <td>Bill Gates</td>
    <td>55577854</td>
  </tr>
  <tr class="odd">
    <td class="checktd"><input type="checkbox" name="checkItem"></td>
    <td>Kevin Gates</td>
    <td>544444</td>
  </tr>
</table>
0
brk 28 feb. 2018 a las 05:50

Compruebe el JsFiddle con cambios

$("table td").on("click", function (e) {
  if (this != e.target) { return; }
  var check = $(this).parent("tr").find("input[type=checkbox]");
  check.prop('checked', !check[0].checked);
}); 

Solución

0
Rubyist 28 feb. 2018 a las 05:56

Esto funcionará para usted

Acabo de eliminar este código - if (this != e.target) { return; } de tu violín.

Y para seguir la acción predeterminada si hizo clic en un checkbox He usado event.target.type para verificar que hizo clic en un checkbox, esto funcionó bien para mí.

$(".odd").on("click", function(e) {
console.log(event.target.type);
  if(event.target.type != 'checkbox') {
    var check = $(this).find("input[type=checkbox]");
    check.prop('checked', !check[0].checked);
  }
});
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
  text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table style="width:40%">
  <tr>
    <th>Check</th>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr class="odd">
    <td class="checktd"><input type="checkbox" class="checkItem"></td>
    <td>Bill Gates</td>
    <td>55577854</td>
  </tr>
  <tr class="odd">
    <td class="checktd"><input type="checkbox" name="checkItem"></td>
    <td>Kevin Gates</td>
    <td>544444</td>
  </tr>
</table>

Espero que esto haya sido útil para ti.

2
weBBer 28 feb. 2018 a las 05:56