Checkbox selects as per tr click

Question

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?

$(".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 link if needed.

void · Accepted Answer · 2018-02-28T05:57:44.077

Modify the this!=e.target And check if it is a checkbox or not.
Change your selector from ".checktd" to "table tr". I would suggest you to use a more specific selector by adding class on table or on 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>

Jithin Raj P R · Answer 2 · 2018-02-28T05:56:23.030

This will work for you

I just removed this code - if (this != e.target) { return; } from your fiddle.

And for following the default action if you clicked on a checkbox I have used event.target.type for checking you clicked a checkbox, This worked fine for me.

$(".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>

Hope this was helpful for you.

bro, now if i click on checkbox then it wont checked. i need both whatever clicks on tr or checkbox it will be selected. can u fix it? — Kevin himch, Feb 28 '18 at 05:50

score 0 · Answer 3 · answered Feb 28 '18 at 05:50

On click of tr find the input element with name attribute and check if it is checked. If checked then uncheck it using prop else 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>

score 0 · Answer 4 · answered Feb 28 '18 at 05:56

0

Check the JsFiddle with Changes

$("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);
});

Solution

answered Feb 28 '18 at 05:56

Rubyist

6,486
10
51
86

Checkbox selects as per tr click

4 Answers4