Extrair Títulos da Caixa de Seleção em Múltiplas Divs (Javascript)

Question

Eu estou tentando escrever um script Greasemonkey que reúne uma lista refinada de todos os itens que possuem um cheque na caixa de seleção. A lista de caixas de seleção pode variar de semana para semana e contém centenas de itens. Procurando aqui eu aprendi que isso pode ser feito puxando todos os elementos por classe nome: getElementsByClassName('class_name')

No entanto, não consigo obter a lista de elementos, muito menos pegar os valores dela.

Aqui está uma versão simplificada do site.

<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>

Eu tentei brincar com isso no JSFiddle (só vejo os valores marcados na caixa de alerta), mas meu código de jogo parece quebrá-lo.

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);
  }

Por fim, pretendo pegar cada item marcado e escrever seu título em uma caixa de texto ao lado, cada um separado por novas linhas.

Existe uma maneira de determinar quais caixas de seleção estão no site (dentro dessa tabela específica, já que existem muitas outras tabelas também) e iterar por elas, puxando apenas os valores de título quando aplicável?

    

Answer 1

Várias questões:

1. Isso pode ser mais um tópico no Stack Overflow.
2. Não é assim que você usa getElementsByClassName ; não faz várias aulas ao mesmo tempo.
3. Para os seletores CSS adequados, você deseja querySelectorAll Doc .
4. grid_8 e pt5 não são alvos robustos. Eles provavelmente mudam com frequência.
   Um melhor caminho "CSS" seria algo como:
   .querySelectorAll ('.displayInlineTable input:checked') (Veja o código, abaixo).
5. Pode ser que sua página da Web carregue as caixas de seleção dinamicamente (via AJAX). Se isso for verdade, você precisará usar métodos com reconhecimento de AJAX, como waitForKeyElements .

Então, para uma página da Web estática:

O código assim funcionará:

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

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

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

Veja uma demonstração ao vivo do jsFiddle .

Para uma página da web dinâmica (AJAX):

Um script completo do Greasemonkey / Tampermonkey, assim, funcionará:

// ==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 () );
}

Note que ele também utiliza o jQuery, o que geralmente é uma boa ideia.