自动单击包含相同文本和标签的页面上的多个按钮

Posted 2023-02-24

【中文标题】自动单击包含相同文本和标签的页面上的多个按钮

【英文标题】：Automatically clicking multiple buttons on a page containing the same text and tag

【发布时间】：2019-02-01 03:53:36

【问题描述】：

我目前正在使用一个脚本，该脚本会自动单击与指定文本关联的单选按钮（但位于指定标记内；在本例中为“标签”）。

当页面加载时，任何带有文本“男性”的单选按钮（假设它位于标签标签内）都会被自动选中。这是我用来执行此操作的不完整脚本：

// ==UserScript==
// @name         Auto Clicker
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        *
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant        GM_addStyle
// ==/UserScript==

const findAndClickParent = text => [...document.querySelectorAll('label > span')]
  .find(e => e.textContent === text)
  .parentElement
  .click();

waitForKeyElements (
  "label",
  () => 
    findAndClickParent('Male');
  
);

现在，每当我访问调查页面时，都会选择第一个包含“男性”文本的单选按钮。但是，如果还有其他带有“男性”作为答案选项的按钮，它们将保持未选中状态。我希望能够选择所有这些 - 单击所有包含“男性”的按钮，而不仅仅是第一个。任何和所有的建议都将不胜感激。

【参考方案1】：

上面代码中只有第一个单选按钮被选中的原因是 .find 是返回与文本匹配的第一个元素。

您可以使用.forEach 循环并单击所有带有文本男性的单选按钮

[...document.querySelectorAll('label > span')].forEach(e => e.textContent === "Male" ? e.parentElement.click(): null)

或

您可以将checked 属性用于您希望在页面加载时选择的所有单选按钮。

<input type="radio" name="gender" value="male" checked="true">

【讨论】：

感谢您的回复！这在控制台中有效。使用 waitForKeyElements 方法在自动填充之前等待的完整代码会是什么样子？也许只需替换 [...doc] 和之后的部分？

乐于助人。是的，您是正确的，只需将 [..doc] 之后的部分替换为建议的代码，如果遇到任何进一步的问题，请告诉我。

再次感谢。一个快速的问题：有什么方法可以重写最后一段代码（在 waitForKeyElements 之后）以简化它吗？我还需要在第二部分中包含 findandclickparent 吗？

【参考方案2】：

在下面的代码中，您可以将.click() 替换为.checked = "true"。或者可能有一个方法将检查设置为 true，然后调用该方法而不是 .click()

const findAndClickParent = text => [...document.querySelectorAll('label > span')]
.find(e => e.textContent === text)
.parentElement
.click();