GreaseMonkey jQuery 脚本只影响一个元素

Question

我的公司使用基于 Web 的产品，其 UI 要求我们针对某些用例单击 200 多个复选框。我们请求了一个“取消选中所有”功能，但显然没有实现。

我尝试编写一个简单的 GreaseMonkey 脚本来解决这个问题：

$('img').click(function() {
    $('input.HideQuestion:checked').each(function() {
        $(this).click();
    });
});

（在我用作点击目标的页面上有一张图片，我们的徽标）

问题是，每次我单击图像时，只有一个（约 270 个）复选框受到影响。每一次额外的点击都会影响下一个复选框。

我可以看到每次选中复选框时网站都会进行 Ajax 调用，但是该 Ajax 调用的响应正文是空的，所以我认为它们只是在更新服务器上的状态，而不是替换页面的一部分。

为什么最终可能只有一个复选框未被选中？

当我使用替代方法时

$(this).prop("checked", true);

所有复选框在视觉上都未选中，但不会发生 Ajax 调用，并且服务器状态永远不会更新。此外，当我选中任何复选框时，所有复选框都会恢复到 GreaseMonkey 之前的状态。

更新

我尝试了@BrockAdams 建议的以下两种方法来拦截 Ajax 调用。 alert() 都没有被调用。

覆盖 XMLHttpRequest.prototype.open https://stackoverflow.com/a/7778218/141172

(function() {
    var proxied = window.XMLHttpRequest.prototype.open;
    window.XMLHttpRequest.prototype.open = function() {
        alert('A-ha! Open!');
        return proxied.apply(this, [].slice.call(arguments));
    };
})();

使用 .ajaxSuccess() 拦截目标页面的 AJAX
https://stackoverflow.com/a/8252726/141172

// Also tried: unsafeWindow.$('body').ajaxSuccess (
$('body').ajaxSuccess ( 
        function (event, requestData)
        {
            alert('A-ha.  Success!');
        }
    );  

Answer 1

我们真的需要为此查看目标页面的 JS 代码。但是，听起来目标页面正在等待 AJAX 响应，然后设置内部状态。它也可能用服务器维护的状态覆盖本地状态。

如果是这样，那么您需要在每次取消选中后等待服务器响应，或者目标页面的 javascript 可能会提供更好的解决方案。

等待您提供更多详细信息（尤其是目标页面是否针对此特定 AJAX 使用 jQuery），以下是一个应该可行的通用方法：

1. 使用$('input.HideQuestion:checked').each() 填充jQuery queue。

2. 如果可能，使用.ajaxSuccess() 拦截目标页面的 AJAX。或者通过覆盖XMLHttpRequest.prototype.open，如果不是。

3. 每次成功完成 AJAX 时，dequeue 下一个项目（如果有）从步骤 1 开始保留在队列中。

   设置dequeue 函数以取消选中其匹配的复选框。

Answer 2

试试这个：

$('img').click(function() {
    $('input[type="checkbox"]:checked').prop('checked', false)
});