☰

提取多個 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，這通常是一個好主意。

相關內容