jquery - テーブルセル内の任意の場所でチェックボックスを選択します

Question

次のような（jQuery）セレクターが必要です。

テーブルセル内にチェックボックスがあるときはいつでも、カーソルをそのテーブルセルへのポインタにし、ユーザーがテーブルセル内の任意の場所をクリックした場合は、それらのチェックボックスをクリックします。

ある時点でこれを持っていたと思いますが、それは「オン」セレクターの時代の前であり、さらに、ある時点で無限ループに悩まされたと思うので、それを取り出しました。

Answer 1

これでうまくいきます。tdsを使用すると多数のイベントが発生する可能性があるため、イベントの委任を使用しました。tableまた、JavaScriptを介して将来さらに追加し、それらを正常に機能させる柔軟性も提供します。

// 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);
});

Answer 2

:hasセレクターを使用できます。

$('td:has(input[type=checkbox])').css('cursor', 'pointer');

$(document).on('click', 'td', function(){
   $('input[type=checkbox]', this).click()
})