Как переключить флажок при нажатии на строку? ⇐ Jquery

[Anonymous]

I am trying to toggle the checked property of a checkbox when I click on a table row but so far with my solution I am unable to achieve it. This is how the HTML looks like:

1st Row Not clickable 2nd Row Not clickable 3rd Row Not clickable and here is the jQuery code I have built:

$(function() { $("#chkContainer tr > td").on("click", function() { const tr = $(this).closest('tr') const chk = tr.find('input:checkbox').prop("checked", true); tr.toggleClass('red', chk.checked); }) }) What is not working? I can check the checkbox when clicking the row for the first time but when I click the same row once again the checkbox remains checked. I am pretty sure my issue is this line: $(":checkbox[value=" + id + "]").prop("checked", true) since I am always setting it to true but I am not sure how to set it to false when the same row gets a new click.

How do I avoid this behavior from happening if I click in the last td which generally contains buttons or user actions?

I could not find any solution to this or I am very bad at searching on Google :|

here is a Fiddle so you can play with it.


Источник: https://stackoverflow.com/questions/781 ... g-in-a-row