通过开发人员工具检查页面中的所有复选框答案

【问题标题】：Check all Checkboxes in Page via Developer Tools通过开发人员工具检查页面中的所有复选框
【发布时间】：2012-12-24 02:57:10
【问题描述】：

我有一个循环在同一页面中创建 20 个复选框（它创建不同的表单）。我希望通过 chrome 开发人员工具 运行 JavaScript，而不使用任何 CHECK 所有 的库复选框。

据我所知：

function() {
    var aa= document.getElementsByTagName("input");
    for (var i =0; i < aa.length; i++){
     aa.elements[i].checked = checked;
    }
}

PS：我在 Stack-Overflow 中搜索并发现了很多问题，但没有一个对我有用，如果有人能找到正确的答案，我会很高兴。

【问题讨论】：

Select All checkbox by javascript or console的可能重复

标签： javascript google-chrome checkbox google-chrome-devtools

【解决方案1】：

要稍微修改已接受的答案，如果您尝试选中某些服务（例如 Loom.com）上的所有复选框，那么您需要单击每个复选框，而不仅仅是将它们设置为“已选中”状态，否则该功能无法按预期工作。

这是执行此操作的代码：

(function() {
    var aa = document.querySelectorAll("input[type=checkbox]");
    for (var i = 0; i < aa.length; i++){
        aa[i].click();
    }
})()

请注意，较长的复选框列表会导致页面暂时暂停，因为所有复选框都会自动为您点击。

【讨论】：

您的建议是 .click() 功能对吗？太棒了，我过去需要这个。
太棒了，每个人都需要知道checked和click之间的基本区别

【解决方案2】：

通过控制台开发工具 (F12)，您可以像在 javascript 或 jQuery 代码中一样使用查询选择器。

'$$' - 表示选择所有项目。如果您使用 '$' 代替，您将只获得第一项。

因此，为了选择所有复选框，您可以执行以下操作

$$('input').map(i => i.checked = true)

或

$$('input[type="checkbox"').map(i => i.checked = true)

【讨论】：

【解决方案3】：

如果您来这里是为了快速单线：

var aa = document.getElementsByTagName("input"); for (var i = 0; i < aa.length; i++) aa[i].checked = true;

【讨论】：

这对我不起作用。适应以下，确实有效：var aa = document.querySelectorAll('input[type=checkbox]'); for (var i = 0; i < aa.length; i++) aa[i].checked = true;
@Tom 谢谢！我跳过了只关心复选框，但可以将其放回（主要答案中的 if 语句）。我想知道什么对你不起作用......你的解决方案可能对我的古代 IE 版本没有帮助。 quirksmode.org/dom/core/#t12
@Tom 仅供参考，我再次签到，似乎没问题。 jsfiddle.net/r7jnxta2

【解决方案4】：

Javascript 函数切换（选中/取消选中）所有复选框。

function checkAll(bx)
{
 var cbs = document.getElementsByTagName('input');
 for(var i=0; i < cbs.length; i++)
 {
    if(cbs[i].type == 'checkbox')
    {
        cbs[i].checked = bx.checked;
     }
 }
}

如果您想从开发人员工具中获取它，请删除函数参数并将值设置为 "true" 或 "false" 而不是 "bx。已检查”

【讨论】：

【解决方案5】：

(function() {
    var aa= document.getElementsByTagName("input");
    for (var i =0; i < aa.length; i++){
        if (aa[i].type == 'checkbox')
            aa[i].checked = true;
    }
})()

使用最新的浏览器可以使用document.querySelectorAll

(function() {
    var aa = document.querySelectorAll("input[type=checkbox]");
    for (var i = 0; i < aa.length; i++){
        aa[i].checked = true;
    }
})()

【讨论】：

这让我不必检查一百万个退订框。谢谢。
这让我在几秒钟内获得了 Udemy 证书。谢谢
这在 docs.google.com 上不起作用，可能是因为它是用 Angular 制作的？

【解决方案6】：

试试setAttribute。

(function() {
  var aa = document.getElementsByTagName("input");
  for (var i =0; i < aa.length; i++){
    aa.elements[i].setAttribute('checked', 'checked');
  }
})();

编辑：添加括号以立即执行该函数。

【讨论】：

您问题中的代码创建了一个函数：“function(){...}”。它实际上并没有调用这个函数，这就是为什么这里提供的答案都不适合你的原因。我们都假设您需要函数内部的帮助，而不是如何运行它。我在我的解决方案中添加了括号，以便它实际上会立即调用该函数。

【解决方案7】：

试试这个:)

(function () {
    var checkboxes = document.querySelectorAll('input[type=checkbox]');

    //convert nodelist to array
    checkboxes = Array.prototype.slice.call(checkboxes);
    checkboxes.forEach(function (checkbox) {
        console.log(checkbox);
        checkbox.setAttribute('checked', true);
    });

})()

http://jsfiddle.net/YxUHw/

【讨论】：

您不需要将节点列表转换为数组，只需像调用 slice 一样调用 forEach ` Array.prototype.forEach.call(checkboxes,function (checkbox) { ` jsfiddle.net/YxUHw/17

【解决方案8】：

你说得差不多了。只需使用

aa[i].checked = "checked";

在循环内部。

也就是说，您需要确保：

"checked" 是字符串，不是变量标识符，并且
您直接索引aa，而不是aa.elements，它不存在

【讨论】：