When TR is clicked, then check the checkbox

Question

When I click it for the first time, it click, but doesn't turn off...

I've tried this one, it checked and uncheck but only once.

This one doesn't work for me either.

$(document).ready(function() {
  $("tr").click(function() {
    var checkbox = $(this).find("input[type=checkbox]");

    if (!checkbox.prop("checked", "")) {
      checkbox.prop("checked", "false");
    } else {
      checkbox.prop("checked", "true");
    }

  });
});

td{
    background:red;
    padding:10px 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>test</td>
  </tr>
</table>

change `!checkbox.prop("checked", "")` to `!checkbox.is(":checked")` — Swati, Mar 20 '21 at 13:44

mplungjan · Accepted Answer · 2021-03-20T13:51:44.687

1

Here is a toggle

$(document).ready(function() {
  $("tr").on("click", function(e) {
    const $target = $(e.target)
    const $checkbox = $(this).find("input[type=checkbox]");
  // only run code when NOT clicking checkbox
    if (!$checkbox.is($target)) {
      let checked = $checkbox.is(":checked")
      $checkbox.prop("checked", !checked)
    }
  });
});

td {
  background: red;
  padding: 10px 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>test</td>
  </tr>
</table>

edited Mar 20 '21 at 13:51

answered Mar 20 '21 at 13:47

mplungjan

169,008
28
173
236

2

Need to make sure target isn't the checkbox itself or it cancels – charlietfl Mar 20 '21 at 13:49
@charlietfl well spotted – mplungjan Mar 20 '21 at 13:51

When TR is clicked, then check the checkbox

1 Answers1