Question

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

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

此外：

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

没有任何反应，devtool控制台输出“未定义”。

要重现，您需要拥有一个已删除邮件的Hotmail电子邮件帐户。

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

Answer 1

您已走上正轨，但遗漏了一些细节。首先，查询选择器功能起作用。寻找元素是他们的面包和黄油。如果您未定义，则选择器字符串不正确。您的HTML是否使用<input type="checkbox">实现了复选框？

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

即可

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

Answer 2

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

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

......或......

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

Answer 3

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

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

见这里：jsFiddle

Answer 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"/>

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

4 个答案: