如何让可点击表格行与HTMX协同工作？

你的问题核心在于：点击行内其他区域时，仅通过jQuery修改了复选框的checked属性，但HTMX默认只监听复选框的点击事件，不会响应属性变化，因此无法触发请求。以下是几种可行的解决方法：

方法1：监听复选框的change事件（最简洁） #

直接给复选框添加hx-trigger="change"属性，让HTMX监听其状态变化事件。当通过jQuery修改checked属性时，会自动触发change事件，进而触发HTMX请求。

修改后的复选框HTML #

<input
    class="form-check-input"
    type="checkbox"
    id="item-1"
    hx-get="/api/test"
    hx-target="#target"
    hx-trigger="change"
/>

保持原有jQuery逻辑不变 #

$(document).ready(function () {
    $("tr.clickable").on("click", function () {
        var $checkbox = $(this).find("input:checkbox");
        $checkbox.prop("checked", !$checkbox.prop("checked"));
    });
    $("tr.clickable > td > input:checkbox").on(
        "click",
        function (event) {
            event.stopPropagation();
        }
    );
});

方法2：在行点击事件中手动触发HTMX请求 #

如果不想修改HTMX属性，可以在切换复选框状态后，调用HTMX的API手动触发请求。

修改后的jQuery脚本 #

$(document).ready(function () {
    $("tr.clickable").on("click", function () {
        var $checkbox = $(this).find("input:checkbox");
        $checkbox.prop("checked", !$checkbox.prop("checked"));
        // 触发复选框的HTMX请求
        htmx.trigger($checkbox[0], "click");
    });
    $("tr.clickable > td > input:checkbox").on(
        "click",
        function (event) {
            event.stopPropagation();
        }
    );
});

方法3：将HTMX属性迁移到行元素上 #

把HTMX的请求属性直接绑定到<tr>上，点击行时触发请求，同时传递复选框的状态给后端。

修改后的行HTML #

<tr class="clickable" hx-get="/api/test" hx-target="#target" hx-vars="checked: $(this).find('input:checkbox').prop('checked')">
    <!-- 原td内容不变 -->
</tr>

修改后的jQuery脚本 #

$(document).ready(function () {
    $("tr.clickable").on("click", function () {
        var $checkbox = $(this).find("input:checkbox");
        $checkbox.prop("checked", !$checkbox.prop("checked"));
        // 触发行的HTMX请求
        htmx.trigger(this, "click");
    });
    $("tr.clickable > td > input:checkbox").on(
        "click",
        function (event) {
            event.stopPropagation();
            // 点击复选框时同步触发行的请求
            htmx.trigger($(this).closest('tr')[0], "click");
        }
    );
});

内容的提问来源于stack exchange，提问作者Dacromir