Question

我有很多复选框，如下所示：

 <input class='masterCheckbox' type='checkbox' onclick='clickAll()' />

 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' />
 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' checked />
 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' checked />
 ... lets say there's exactly 100 ...
 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' />
 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' />
 <input class='modifyDb' type='checkbox' onclick='ajaxCall(someId)' checked />

ajaxCall()函数对PHP页面进行ajax调用（使用jQuery）以在DB中进行一些更改。

我希望masterCheckbox复选框在选中后，浏览所有未选中的复选框并单击全部，以便它们各自进行单独的ajax调用。

使用jQuery，我设法获得所有modifyDb复选框，然后使用.each()函数在每个元素上调用.click()。这视觉上有效;复选框被切换，但是没有进行ajax调用。

这是因为ajax调用太快了吗？我可以以某种方式排队函数调用吗？

Answer 1

使用trigger。
以下代码重新使用了所有onclick

中的.modifyDb

function clickAll() {
    $('.modifyDb').trigger('click');
}

REFFERENCE

http://api.jquery.com/trigger/

Answer 2

我重新排序并删除所有内联事件处理程序。像这样：

<input class='masterCheckbox' type='checkbox' />

<input class='modifyDb' type='checkbox' data-id='someId)' />
<!-- .... -->

然后绑定它们：

$(".modifyDb").click(function() {
    var id = $(this).data("id");
    ajaxCall(id);
});

对于主复选框：

$(".masterCheckbox").click(function() {
    $(".modifyDb").each(function() {
        var id = $(this).data("id");
        ajaxCall(id);
        // or if you really must, you could use trigger() here
    })
});

Answer 3

这将触发尚未检查的框上的click事件

function clickAllUnchecked(){
    $('.modyfDb').not(':checked').trigger('click')
}

JavaScript排队点击事件

3 个答案: