如何使用复选框从 .prop() 函数触发 jQuery .change()?

Question

Setup：

我在表的标题中有 2 个复选框：批准和隐藏。如果单击"批准"复选框，它将选中以下行中的所有"批准"复选框。同样，如果单击"隐藏"复选框，它将选中以下行中的所有"隐藏"复选框。有一个"批准/全部隐藏"按钮，用于发出 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>

j查询：

$("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