In my code, when you click on the first `<td>`, it's checkbox gets selected. But my goal is `checkbox` should get selected by tr click. So when I click on any `<tr>` its `checkbox` will be selected. To do this I already tried to replace on click class ".checktd" to ".odd" but this does not work.

Any idea how can I achieve that?

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

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

th,
td {
  padding: 5px;
  text-align: left;
}
```

```html
<!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](https://jsfiddle.net/kjr27r2j/) link if needed.