Selecting/checking td 中的第一个复选框 class？

Question

我目前正在想办法 select 页面上具有以下 HTML 的第一个复选框（我不确定它在技术上是否是单选按钮） (http://www.swagbucks.com/polls):

<td class="pollCheckbox"></td>

我一直在使用以下代码尝试 select 页面上 4 个复选框中的第一个复选框：

// ==UserScript==
// @name         SBPollSelectv2
// @version      1.0
// @description  Demonstration script to change form values
// @include      *
// @grant        none
// ==/UserScript==

var tds = document.getElementsByTagName("td");
for (var i = 0; i<tds.length; i++) {

  // If it currently has the pollCheckbox class
  if (tds[i].className == "pollCheckbox") {
    // Select first button
    document.getElementsByClassName("pollCheckbox")[0].checked = true;
  }
}

我认为最后一行代码是缺陷所在。我可以 select 通过标签的所有 TD 元素，然后尝试按 class 排序。然后，我需要 select 具有给定 class 的第一个复选框。不幸的是，我的代码不起作用。我需要弄清楚如何 select 具有 class 名称的第一个项目，然后 select 该复选框。任何帮助都会很棒。

Answer 1

它们实际上不是复选框或单选按钮 - 它们 <td> 的样式 看起来 像单选按钮，因此分配给 .checked工作。相反，在您想要的 td 上调用 click()，站点的 JS 将使其看起来已检查：

document.querySelector('td.pollCheckbox').click();

包含该单行代码的用户脚本将使第一个 td 出现 selected。

因为你只想select 第一个 td单选按钮看起来很像，不需要循环，你可以只使用querySelector 到 return 匹配 selector 字符串的第一个元素。

Answer 2

元素 td 只是一个 table 单元格。通过将 class "pollAnswerSelected" 添加到带有 class "indivAnswerWrap" 的元素 td 来显示选中的圆圈。您可以使用以下代码选中第一个框。要取消选中它，只需删除 class "pollAnswerSelected".

document.getElementsByClassName("indivAnswerWrap ")[0].classList.add("pollAnswerSelected")

Selecting/checking td 中的第一个复选框 class？

Selecting/checking the first checkbox in a td class?

javascript

greasemonkey

radio

userscripts

tampermonkey