根据旁边的标签勾选单选框

Question

作为一种爱好，我正在尝试自动化一些调查问卷。多年来我不得不与它们打交道，我总是想知道自动化它们的最佳方法是什么。现在我已经达到了可以实现我的热情并学习如何去做的地步。这对我有好处吗？绝对不是，但它肯定会对我的 JavaScript 知识有所帮助。

因此，我找到了一个随机页面，右侧有单选按钮和标签。每行都有复选框（单选）和标签，如下所示：

<div class="element even  groupingCols OneColumnEl clickableCell">
<span class="cell-sub-wrapper cell-legend-right">
<span class="cell-input cell-sub-column">
<input type="radio" name="ans30596.0.0" value="0" id="ans30596.0.0" class="input radio fir-hidden"><span class="fir-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 22 22" class="rounded">
<circle cx="10" cy="10" r="10" class="fir-base"></circle>
<circle cx="10" cy="10" r="9" class="fir-bg"></circle>
<circle cx="10" cy="10" r="7" class="fir"></circle>
</svg>
</span>
</span>
<span class="cell-text cell-sub-column"><label for="ans30586.0.0">Male</label> </span>
</span>
</div>

我的步骤：

a) 获取单选按钮：

for (const elem of document.querySelectorAll('[type="radio"]')){
    console.log("true")
};

b) 获取列表中标签的值，然后测试是否至少返回一个值：

const list = document.getElementsByTagName('label')
let text = list.item(0).innerHTML;

c) 创建一个 for 来浏览上面的列表：

for (i=0; i<list.length; i++)
{
    let text = list.item(i).innerHTML;
    console.log(text);
}

d) 将类名更改为“选定的”类名

所以，总的来说，我的脚本似乎有效：

const list = document.getElementsByTagName('label');
const tickbox = document.querySelectorAll('[type="radio"]');

for (i=0; i<list.length; i++)
{
    let value = list.item(i).innerHTML;
      if(value = "Male")
    {
        //let spanclass = document.querySelector('span:nth-child('+i+')');
        let spanclass = document.querySelector("div:nth-child("+i+") > span > span.cell-input.cell-sub-column > span")
        if(spanclass != null)
        {
            spanclass.setAttribute("class", "fir-icon selected");
        }
    }
    
}

但是，当我单击下一个问题页面旁边的 时，我收到错误，就好像尚未做出选择一样。

我是否遗漏了最终 HTML 中的任何内容？这是我在 Chrome 中手动单击而不使用片段时的样子：

<span class="fir-icon selected">
<circle cx="10" cy="10" r="10" class="fir-base"></circle>
<circle cx="10" cy="10" r="9" class="fir-bg"></circle>
<circle cx="10" cy="10" r="7" class="fir-selected"></circle>
</span>

更新：

我添加了，但仍然不起作用：

let circleclass = document.querySelector("div:nth-child(3) > span > span.cell-input.cell-sub-column > span > svg > circle:nth-child(3)")

circleclass .setAttribute("class", "fir-selected");

Answer 1

您似乎正在尝试选择不是输入的元素？相反，更改输入的值，但不要添加类，而是将输入设置为选中状态，如下所示。

for (const elem of document.querySelectorAll('[type="radio"]')){
    elem.checked = true;
};

如果您只想检查所有无线电输入，那么这将是完美的，如果不是那么您可以将这个原理应用于您需要的东西。

希望这有帮助。