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

Question

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

313

JG7 2017-08-28 в 19:55

Я пытаюсь написать сценарий 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 ответ на вопрос

1

Accepted Answer · 2017-08-28 21:33:38

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

Это может быть больше по теме в переполнении стека.
Это не то, как вы используете getElementsByClassName; он не делает несколько классов одновременно.
Для правильных селекторов CSS, вы хотите querySelectorAll^док .
grid_8и pt5не являются надежными целями. Они могут часто меняться.
Лучший CSS-путь будет выглядеть примерно так:
.querySelectorAll ('.displayInlineTable input:checked')(см. Код ниже.)
Возможно, ваша веб-страница загружает флажки динамически (через 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, что обычно является хорошей идеей.

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

1 ответ на вопрос

Похожие вопросы