如何从带有复选框的 .prop() 函数触发 jQuery .change()？

Question

设置：

我在 table 的 header 中有 2 个复选框：批准和隐藏。如果单击“批准”复选框，它将选中下面各行中的所有“批准”复选框。同样，如果单击隐藏复选框，它将选中下面各行中的所有隐藏复选框。有一个 Approve/Hide All 按钮可以发出 AJAX 请求。如果一行中的复选框已更改，我只希望它发出 AJAX 请求。当页面加载时，一些复选框已经被选中。

什么是有效的：

当用户单击一行中的复选框（不是 header）时，.data('changed', true) 会添加到该单个复选框，并且 AJAX 请求只会发送它而不是所有复选框的信息。

什么不起作用：

当用户单击 table 的 header 中的批准或隐藏复选框时，它会将 .data('changed', true) 添加到下面各行中的所有批准或隐藏复选框。

我想要的：

我只想将 .data('changed', true) 添加到以下行中已更改的复选框。我不喜欢使用 .data()，但对我来说这似乎是最简单的。

代码：

参见 jsFidde。

HTML:

<div class="table-responsive">
        <table class="creatives table table-condensed">
            <thead>
              <tr>
                <th><label class="checkbox-inline"><input type="checkbox" value="Approve">Approve</label></th>
                <th><label class="checkbox-inline"><input type="checkbox" value="Hide">Hide</label></th>
              </tr>
            </thead>
            <tbody>
            <tr>
                <form>
                <td>
                        <input type="checkbox" name="is_feathr_approved" value="Approve" data-crv_id="{{ crv.id }}">
                </td>
                <td>
                        <input type="checkbox" name="is_hidden" value="Hide" data-crv_id="{{ crv.id }}">
                </td>
            </tr>
            <tr>
                <td>
                        <input type="checkbox" name="is_feathr_approved" value="Approve" data-crv_id="{{ crv.id }}">
                </td>
                <td>
                        <input type="checkbox" name="is_hidden" value="Hide" data-crv_id="{{ crv.id }}">
                </td>
            </tr>
            <tr>
                <td colspan="3" align="center"><input type="submit" class="btn btn-success" value="Approve/Hide All"></td>
                <td></td>
            </form>
            </tr>
            </tbody>
        </table>
        </div>

jQuery:

    $("table.creatives th input[type='checkbox'][value='Approve']").click( function () {
    $("table.creatives td input[value='Approve']").prop('checked', this.checked);
    // this is adding 'changed' to all checkboxes, instead of only the ones that have changed
    // $("table.creatives td input[value='Approve']").data('changed', true);
}) 

$("table.creatives th input[type='checkbox'][value='Hide']").click( function () {
    $("table.creatives td input[value='Hide']").prop('checked', this.checked);
    // $("table.creatives td input[value='Hide']").data('changed', true);
}) 

$("table.creatives td input[type='checkbox']").change( function () {
    $(this).data('changed', true);
})

杂项：

我知道我需要 DRY 我的一些代码，但还没有抽出时间去做。
copying/pasting 的 HTML 中可能缺少标签或结束标签，并删除了无关的内容。请无视

Answer 1

我无法使用 .prop() 找到执行此操作的方法，而是修改了上面的 jQuery。

// get all checkboxes in the header of this particular table
$("table.creatives th input[type='checkbox']").click( function () {
    // get all checkboxes in the table cells
    const approveHideArray = $("table.creatives td input[type='checkbox']");
    const approveHideArrayLength = approveHideArray.length;
    for (let i = 0; i < approveHideArrayLength; i++) {
        if (this.value === approveHideArray[i].value) {
            // if the cell checkboxes are different from the header checkbox, add data-changed=true to it
            if (this.checked !== approveHideArray[i].checked) {
                $(approveHideArray[i]).data('changed', true);
            }
            // finally, check the cell checkbox if the header checkbox is checked, or vice versa
            approveHideArray[i].checked = this.checked;
        } // end if
    } // end for
}); // end anonymous function

// this is unchanged from my original post
$("table.creatives td input[type='checkbox']").change( function () {
    $(this).data('changed', true);
}); // end anonymous function

如何从带有复选框的 .prop() 函数触发 jQuery .change()？

How to trigger jQuery .change() from a .prop() function with checkboxes?

checkbox

jquery

onchange

prop