Question

设定：

我在表格标题中有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>

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

如何使用复选框从.prop（）函数触发jQuery .change（）？

1 个答案: