如何选择并单击所有 html 复选框？答案

【问题标题】：How to select and click all html checkboxes?如何选择并单击所有 html 复选框？
【发布时间】：2017-10-18 15:11:28
【问题描述】：

我希望选择并点击网页中的所有复选框。我试过了：

document.querySelectorAll('button[role="checkbox"]').forEach((e)=>{
    e.click();
});

还有：

document.querySelectorAll('[aria-checked="false"]').forEach((e)=>{
    e.click();
});

什么也没发生，devtool 控制台输出“未定义”。

要复制，您需要有一个 hotmail 电子邮件帐户，其中的邮件已被删除。

在 hotmail.com 中转到“已删除项目”，那里有“恢复已删除项目”，然后将打开一个包含已删除对话的窗口。在每个对话附近都会有一个复选框。

【问题讨论】：

未定义意味着您选择了错误的（和不存在的数据）。你能分享你的包含上述复选框的 HTML 的 sn-p 吗？
$(":checkbox").click() ?添加html标记以进行澄清
对不起，该网页包含私人信息，要在线复制，必须有一个 hotmail 电子邮件帐户，其中许多邮件已被删除。我只想标记网页中的所有复选框。这些是简单的 html 复选框，没有任何自定义。
@guradio 这不起作用。
没有html标记我只能猜测。

标签： javascript jquery

【解决方案1】：

您在正确的轨道上，但缺少一些细节。首先，查询选择器功能起作用。寻找元素是他们的生计。如果您未定义，那么您的选择器字符串不正确。您的 HTML 是否使用 <input type="checkbox"> 实现复选框？

其次，不要使用.click()。这可能有效，但对于后续/维护程序员来说需要更多的工作和认知努力。它还可能触发点击事件（当然，除非你也喜欢）。只需设置checked 属性：

document.querySelectorAll('input[type="checkbox"]').forEach( (e) => e.setAttribute('checked', '') );

【讨论】：

谢谢！在这种情况下，这些是button 而不是input。一会儿试试看。

【解决方案2】：

如果您的复选框是inputs，您可以使用...

$('input:checkbox').prop('checked',true);

...或...

$('input[type="checkbox"]').prop('checked',true);

【讨论】：

【解决方案3】：

也许不是模拟点击，而是尝试手动设置aria-checked属性：

document.querySelectorAll('[role="checkbox"]').forEach((e)=>{
    //e.click();
    e.setAttribute("aria-checked", "true")
});

请看这里：jsFiddle

【讨论】：

【解决方案4】：

试试下面的代码

$("input[type='checkbox']").change(function(){
    console.log($(this).attr("id")+" changed");
});

$(document).ready(function(){
    $("input[type='checkbox']").prop("checked",true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="chkbox1" checked="checked"/>
<input type="checkbox" id="chkbox2"/>
<input type="checkbox" id="chkbox3"/>

【讨论】：