Extraia títulos de caixas de seleção em vários divs (Javascript)

Question

Estou tentando escrever um script Greasemonkey que reúna uma lista refinada de todos os itens marcados em suas caixas de seleção. A lista de caixas de seleção pode variar de semana para semana e contém centenas de itens. OlhandoaquiAprendi que isso pode ser feito puxando todos os elementos pelo nome da classe:getElementsByClassName('class_name')

No entanto, não estou conseguindo obter a lista de elementos, muito menos obter 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>

Tentei brincar com isso no JSFiddle (basta ver os valores verificados 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 desta tabela específica, pois também existem muitas outras tabelas) e iterar por elas, puxando apenas os valores do título quando aplicável?

Answer 1

Vários problemas:

1. Isso pode estar mais no tópico do Stack Overflow.
2. Não é assim que você usa getElementsByClassName; não faz várias aulas ao mesmo tempo.
3. Para o devidoSeletores CSS, você querquerySelectorAll^Doutor.
4. grid_8e pt5não são alvos robustos. É provável que mudem com frequência.
   Um "caminho" CSS melhor seria algo como:
   .querySelectorAll ('.displayInlineTable input:checked')(Veja o código abaixo.)
5. Pode ser que sua página carregue as caixas de seleção dinamicamente (via AJAX). Se isso for verdade, você precisará usar métodos compatíveis com AJAX, comowaitForKeyElements.

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

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

Ver umdemonstração ao vivo em jsFiddle.

---

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

Um script Greasemonkey/Tampermonkey completo, como este, 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 () );
}

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