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

Question

设置：

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

什么是有效的：

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

什么不起作用：

当用户单击表格标题中的批准或隐藏复选框时，它会将.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);
})

其他：

• 我知道我需要干燥我的一些代码，但还没有解决它。
• 由于复制/粘贴和删除无关内容，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