当使用 jQuery 更改复选框属性时，模拟单击多个复选框以发出 AJAX 请求答案

【问题标题】：Simulate a click on multiple Checkboxes to issue AJAX request when checkbox attribute is changed with jQuery当使用 jQuery 更改复选框属性时，模拟单击多个复选框以发出 AJAX 请求
【发布时间】：2015-07-04 07:28:15
【问题描述】：

我有一个矩阵样式的网格，它允许基于每个用户更新项目的某些用户权限。

它使用表格网格并发出 AJAX 请求以在单击时立即更新每个设置。

我刚刚添加了一些 jQuery 代码来批量检查和取消选中用户行的所有复选框。

我遇到的问题是，当 Row 为大量 checked 或 un-checked 时，我还需要对 Row 中的所有复选框发出 AJAX 请求

我有下面的所有演示代码和一个 JSFiddle 演示。

JSFiddle 演示： http://jsfiddle.net/jasondavis/7597y7q5/

预览图片：

JavaScript/jQuery：

$(document).ready(function() {

    // Check/Un-check All checkboxes in a User Row
    $(".checkall").click(function(){
        $(this).parents('tr').find(':checkbox').prop('checked', this.checked);
    });

    // Make AJAX Request to Update User Permission setting in Backend Database
    $(".flipswitch").change(function () {
        var flip = $(this).closest('td');
        //alert("perm_id="+this.value+"&permissions=" + this.checked);
        $.ajax({
            type: 'post',
            url: '<?php echo $_SERVER['PHP_SELF']; ?>',
            data: "perm_id="+ this.value + "&permission=" + this.checked,
            success: function() {
                flip.effect("highlight", {color:"#12D812"}, 2000)
            }
        });
    });

});

表格 HTML：

<table>
    <tbody>
        <tr class="table_header">
            <th>&nbsp;</th>
            <th align="center">https://google.com/-1</th>
            <th align="center">https://google.com/-2</th>
            <th align="center">https://google.com/-3</th>
            <th align="center">https://google.com/-4</th>
            <th align="center">https://google.com/-5</th>
        </tr>

        <tr>
            <td><input class="checkall" type="checkbox"> user 1-1</td>
            <td align="center">user 1<input checked="checked" class=
            "flipswitch" name="0" type="checkbox" value="1">1</td>
            <td align="center">user 1<input checked="checked" class=
            "flipswitch" name="1" type="checkbox" value="2">1</td>
            <td align="center">user 1<input checked="checked" class=
            "flipswitch" name="2" type="checkbox" value="3">1</td>
            <td align="center">user 1<input checked="checked" class=
            "flipswitch" name="3" type="checkbox" value="4">1</td>
            <td align="center">user 1<input checked="checked" class=
            "flipswitch" name="4" type="checkbox" value="5">1</td>
        </tr>

        <tr>
            <td><input class="checkall" type="checkbox"> user 2-2</td>
            <td align="center">user 2<input checked="checked" class=
            "flipswitch" name="5" type="checkbox" value="6">2</td>
            <td align="center">user 2<input checked="checked" class=
            "flipswitch" name="6" type="checkbox" value="7">2</td>
            <td align="center">user 2<input checked="checked" class=
            "flipswitch" name="7" type="checkbox" value="8">2</td>
            <td align="center">user 2<input checked="checked" class=
            "flipswitch" name="8" type="checkbox" value="9">2</td>
            <td align="center">user 2<input checked="checked" class=
            "flipswitch" name="9" type="checkbox" value="10">2</td>
        </tr>

        <tr>
            <td><input class="checkall" type="checkbox"> user 3-3</td>
            <td align="center">user 3<input checked="checked" class=
            "flipswitch" name="10" type="checkbox" value="11">3</td>
            <td align="center">user 3<input checked="checked" class=
            "flipswitch" name="11" type="checkbox" value="12">3</td>
            <td align="center">user 3<input checked="checked" class=
            "flipswitch" name="12" type="checkbox" value="13">3</td>
            <td align="center">user 3<input checked="checked" class=
            "flipswitch" name="13" type="checkbox" value="14">3</td>
            <td align="center">user 3<input checked="checked" class=
            "flipswitch" name="14" type="checkbox" value="15">3</td>
        </tr>

        <tr>
            <td><input class="checkall" type="checkbox"> user 4-4</td>
            <td align="center">user 4<input checked="checked" class=
            "flipswitch" name="15" type="checkbox" value="16">4</td>
            <td align="center">user 4<input checked="checked" class=
            "flipswitch" name="16" type="checkbox" value="17">4</td>
            <td align="center">user 4<input checked="checked" class=
            "flipswitch" name="17" type="checkbox" value="18">4</td>
            <td align="center">user 4<input checked="checked" class=
            "flipswitch" name="18" type="checkbox" value="19">4</td>
            <td align="center">user 4<input checked="checked" class=
            "flipswitch" name="19" type="checkbox" value="20">4</td>
        </tr>

        <tr>
            <td><input class="checkall" type="checkbox"> user 5-5</td>
            <td align="center">user 5<input checked="checked" class=
            "flipswitch" name="20" type="checkbox" value="21">5</td>
            <td align="center">user 5<input checked="checked" class=
            "flipswitch" name="21" type="checkbox" value="22">5</td>
            <td align="center">user 5<input checked="checked" class=
            "flipswitch" name="22" type="checkbox" value="23">5</td>
            <td align="center">user 5<input checked="checked" class=
            "flipswitch" name="23" type="checkbox" value="24">5</td>
            <td align="center">user 5<input checked="checked" class=
            "flipswitch" name="24" type="checkbox" value="25">5</td>
        </tr>

        <tr>
            <td><input class="checkall" type="checkbox"> user 6-6</td>
            <td align="center">user 6<input checked="checked" class=
            "flipswitch" name="25" type="checkbox" value="26">6</td>
            <td align="center">user 6<input checked="checked" class=
            "flipswitch" name="26" type="checkbox" value="27">6</td>
            <td align="center">user 6<input checked="checked" class=
            "flipswitch" name="27" type="checkbox" value="28">6</td>
            <td align="center">user 6<input checked="checked" class=
            "flipswitch" name="28" type="checkbox" value="29">6</td>
            <td align="center">user 6<input checked="checked" class=
            "flipswitch" name="29" type="checkbox" value="30">6</td>
        </tr>
    </tbody>
</table>

小 CSS：

table {  border: 1px solid #000;  }
th {  background-color: #CCC;  }
td {  border: 1px solid #CCC;   }

【问题讨论】：

标签： javascript jquery forms checkbox

【解决方案1】：

会同时触发大量请求，但您可以尝试的第一件事是在设置 checked 属性时触发 change 事件

$(".checkall").click(function(){
        $(this).parents('tr')
               .find(':checkbox')
               .prop('checked', this.checked)
               .change();// trigger change event
});

【讨论】：

感谢我在发布后立即发现了这一点。我喜欢只查找/查找项目一次的想法。 +1
如果时间允许我会接受你的回答，谢谢

【解决方案2】：

我想通了。

我添加了一个change() 调用来发出/触发change...

$(this).parents('tr').find(':checkbox').change();

所以更新的 jQuery 代码是...

$(document).ready(function() {

    $(".checkall").click(function(){
        $(this).parents('tr').find(':checkbox').prop('checked', this.checked);
        $(this).parents('tr').find(':checkbox').change();
    });


    $(".flipswitch").change(function () {
        var flip = $(this).closest('td');
        //alert("perm_id="+this.value+"&permissions=" + this.checked);
        $.ajax({
            type: 'post',
            url: '/echo/html/',
            data: "perm_id="+ this.value + "&permission=" + this.checked,
            success: function() {
                flip.effect("highlight", {color:"#12D812"}, 2000)
            }
        });
    });

});

更新的 JSFiddle http://jsfiddle.net/jasondavis/7597y7q5/6/ 发出 AJAX 请求 X 列数，当现在单击批量更新行的复选框时。因此，一行中的所有复选框都被选中和取消选中，每个复选框也会有一个 AJAX 请求。

希望这对其他人有所帮助。我发布了这个答案，而不是删除这个问题以供我以后个人参考。

如果有更好的方法，我当然也愿意！谢谢

更新

根据@charlietfl 的回答，最好将我的change() 附加到我当前的jQuery 元素搜索/查找的末尾，而不是进行第二次查找以查找复选框...

$(this).parents('tr').find(':checkbox').prop('checked', this.checked).change();

【讨论】：