Извлечь заголовки флажков в нескольких разделах (Javascript)

Question

Я пытаюсь написать скрипт 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);
  }

В конечном счете, я планирую взять каждый проверенный элемент и написать его заголовок в текстовое поле сбоку, каждый из которых будет разделен новыми строками.

Есть ли способ определить, какие флажки установлены на сайте (в пределах этой конкретной таблицы, поскольку есть также много других таблиц) и выполнить итерацию по ним, вытягивая только значения заголовков, когда это применимо?

Answer 1

Несколько вопросов:

1. Это может быть больше по теме в переполнении стека.
2. Это не то, как вы используете getElementsByClassName ; он не делает несколько классов одновременно.
3. Для правильных селекторов CSS, вы хотите querySelectorAll ^Doc.
4. grid_8 и pt5 не являются надежными целями. Они могут часто меняться.
   Лучший CSS-путь будет выглядеть примерно так:
   .querySelectorAll ('.displayInlineTable input:checked') (см. код ниже.)
5. Возможно, ваша веб-страница загружает флажки динамически (через AJAX). Если это правда, вам нужно использовать AJAX-осведомленные методы, такие как waitForKeyElements.

Итак, для статической веб-страницы:

Код вроде так будет работать:

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, что обычно является хорошей идеей.