Question

I need a (jQuery) selector that says:

Anytime there’s a checkbox inside a table cell, then make the cursor a
pointer for that table cell and if the user clicks anywhere inside the
table cell, then click the checkbox for them.

I think I had this at one point, but that was before the days of the “on” selector and besides, I think it got me in trouble with an infinite loop at some point, so I took it out.

Answer 1

This will do it. I went with event delegation with the td, as there can be a large number with tables, and it also gives you the flexibility to add more in the future via JavaScript and have them just work.

// Get some references to your elements.
var $table = $("#some-table");
var $tdWithCheckbox = $table.find("td:has(input[type='checkbox'])");    

// Alternatively, add a class which has `cursor: pointer`.
$tdWithCheckbox.css("cursor", "pointer");

// Use event delegation.
$table.on("click", "td", function() {
     $(this).find("input[type='checkbox']").prop("checked", true);
});