Automatically clicking multiple buttons on a page containing the same text and tag

Question

I'm currently using a script that automatically clicks radio buttons associated with specified text (but lie within a specified tag; in this case, 'label').

When a page loads, any radio button with the text "Male" (given that it is within a label tag) is automatically selected. Here's the incomplete script I have been using to do this:

// ==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');
  }
);

Right now, whenever I visit a survey page, the first radio button that contains the text "Male" is selected. But if there are other buttons with "Male" as an answer choice, they remain unselected. I want to be able to select all of them - to click all buttons that would contain "Male," and not just the first. Any and all advice would be deeply appreciated.

Answer 1

The reason why only first radio button is getting selected in above code is .find is returning the first element which matches the text.

you can use .forEach to loop and click all the radio button having text Male

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

OR

You Can Use checked property for all radio buttons you want to be selected on page load.

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