☰

提取多个 Div 中的复选框标题 (Javascript)

tag-icon • tag-icon javascript greasemonkey
提取多个 Div 中的复选框标题 (Javascript)

我正在尝试编写一个 Greasemonkey 脚本，它将所有复选框中带有勾选的项目汇总成一份精炼列表。复选框列表每周都可能不同，并且包含数百个项目。寻找这里我了解到，这可以通过按类名提取所有元素来完成：getElementsByClassName('class_name')

但是，我无法获取元素列表，更不用说从中获取值了。

这是该网站的简化版本。

<div class="grid_8 pt5 displayInlineTable">
  <div id="ListSelector" style="width:450px;float:left; padding-right:10px;">
    <div id="testDiv" style="border: solid 1px; overflow: auto; width: 450px;
        height: 200px; background-color: white" align="left">
      <div id="divLB" class="hstmls" style="width: 600px;">
        <input name="Name1" type="checkbox" id="ID1" checked="checked" title="Title1" value="Value1" onclick="tA('thing');">
        <label id="ID1_lf" for="ID1">Title1</label>
        <br>
        <input name="Name2" type="checkbox" id="ID2" checked="checked" title="Title2" value="Value2" onclick="tA('thing');">
        <label id="ID2_lf" for="ID2">Title2</label>
        <br>
        <input name="Name3" type="checkbox" id="ID3" title="Title3" value="Value3" onclick="tA('thing');">
        <label id="ID3_lf" for="ID3">Title3</label>
        <br>
      </div>
    </div>
  </div>
</div>

我曾尝试在 JSFiddle 上玩这个（只看到警告框中的选中值）但我的游戏代码似乎破坏了它。

var checkedValue = null;
var inputElements = document.getElementsByClassName('grid_8 pt5 displayInlineTable');
for (var i = 0; inputElements[i]; ++i) {
  if (inputElements[i].checked) {
    alert(inputElements[i].value);
  }

最终，我计划将每个检查的项目的标题写入侧面的文本框中，每个标题之间用换行符分隔。

有没有办法确定网站上有哪些复选框（在这个特定的表内，因为还有很多其他的表）并遍历它们，在适用时只提取标题值？

答案1

几个问题：

  1. 这可能与 Stack Overflow 上的主题更加相关。
  2. 这不是您的使用方式getElementsByClassName；它不会同时执行多个类。
  3. 为了适当的CSS 选择器， 你要querySelectorAll文件。
  4. grid_8并且pt5不是稳健的目标。它们可能会经常变化。
    更好的 CSS“路径”应该是这样的：（
    .querySelectorAll ('.displayInlineTable input:checked')参见下面的代码。）
  5. 您的网页可能会动态加载复选框（通过 AJAX）。如果是这样，您需要使用支持 AJAX 的方法，例如等待关键元素。

所以，对于静态网页：

像这样的代码可以工作：

var chkdItems = document.querySelectorAll (".displayInlineTable input:checked");

console.log ("Checked Items:\n--------------");

chkdItems.forEach ( (chkBox, J) => {
    console.log (J, ": ", chkBox.value);
} );

看到jsFiddle 上的现场演示。

对于动态（AJAX）网页：

完整的 Greasemonkey/Tampermonkey 脚本可以像这样工作：

// ==UserScript==
// @name     _Simple Checkbox value demo
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.

waitForKeyElements (".displayInlineTable input:checked", listChkbxValues);

function listChkbxValues (jNode) {
    if ( ! listChkbxValues.hdrPrinted) {
        listChkbxValues.hdrPrinted = true;
        console.log ( `
            Checked Items listed asynchronously, below:\n
            -------------------------------------------
        ` );
    }
    console.log ("Found value: ", jNode.val () );
}

请注意，它还利用了 jQuery，这通常是一个好主意。

相关内容