☰

Extraer títulos de casillas de verificación dentro de múltiples divisiones (Javascript)

tag-icon • tag-icon javascript greasemonkey
Extraer títulos de casillas de verificación dentro de múltiples divisiones (Javascript)

Estoy intentando escribir un script de Greasemonkey que reúna una lista refinada de todos los elementos que tienen una marca en su casilla de verificación. La lista de casillas de verificación puede variar de una semana a otra y contiene cientos de elementos. MirandoaquíHe aprendido que esto se puede hacer extrayendo todos los elementos por nombre de clase:getElementsByClassName('class_name')

Sin embargo, no logro obtener la lista de elementos, y mucho menos obtener sus valores.

Aquí hay una versión simplificada del sitio.

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

Intenté jugar con esto en JSFiddle (solo vea los valores marcados en el cuadro de alerta) pero mi código de reproducción parece no funcionar.

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

En última instancia, planeo tomar cada elemento marcado y escribir su título en un cuadro de texto al lado, cada uno separado por nuevas líneas.

¿Hay alguna manera de determinar qué casillas de verificación hay en el sitio (dentro de esta tabla en particular, ya que también hay muchas otras tablas) y recorrerlas en iteración, extrayendo solo los valores del título cuando corresponda?

Respuesta1

Varios asuntos:

  1. Esto puede ser más sobre el tema en Stack Overflow.
  2. Así no es como se usa getElementsByClassName; no hace varias clases a la vez.
  3. Para el correctoSelectores CSS, quieresquerySelectorAllDoc.
  4. grid_8y pt5no son objetivos sólidos. Es probable que cambien con frecuencia.
    Una mejor "ruta" de CSS sería algo como:
    .querySelectorAll ('.displayInlineTable input:checked')(Consulte el código a continuación).
  5. Puede ser que tu página web cargue las casillas de verificación dinámicamente (vía AJAX). Si eso es cierto, necesita utilizar métodos compatibles con AJAX, comoesperar para elementos clave.

Entonces,para una página web estática:

Un código como este funcionará:

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

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

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

Ver undemostración en vivo en jsFiddle.

Para una página web dinámica (AJAX):

Un script completo de Greasemonkey/Tampermonkey, 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 () );
}

Tenga en cuenta que también aprovecha jQuery, lo que suele ser una buena idea.

información relacionada