Checkbox-Titel in mehreren Divisionen extrahieren (Javascript)

Question

Checkbox-Titel in mehreren Divisionen extrahieren (Javascript)

381

JG7 2017-08-28 в 19:55

Ich versuche, ein Greasemonkey-Skript zu schreiben, das eine verfeinerte Liste aller Elemente enthält, die in ihrem Kontrollkästchen aktiviert sind. Die Liste der Kontrollkästchen kann von Woche zu Woche variieren und enthält Hunderte von Elementen. Wenn ich hier schaue, habe ich gelernt, dass dies möglich ist, indem alle Elemente nach Klassennamen gezogen werden:getElementsByClassName('class_name')

Ich kann jedoch nicht die Liste der Elemente abrufen, ganz zu schweigen von den Werten.

Hier ist eine vereinfachte Version der 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>

Ich habe versucht, mit JSFiddle damit zu spielen (sehen Sie nur die aktivierten Werte in der Alarmbox), aber mein Abspielcode scheint ihn zu beschädigen.

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

Letztendlich plane ich, jedes Element, das geprüft wird, in ein Textfeld nebeneinander zu schreiben, wobei jedes Element durch neue Zeilen getrennt wird.

Gibt es eine Möglichkeit, zu bestimmen, welche Kontrollkästchen auf der Website (innerhalb dieser bestimmten Tabelle, da es viele andere Tabellen gibt) auch durchlaufen werden und diese durchlaufen werden, wobei nur die Titelwerte gezogen werden, falls zutreffend?

1

1 Antwort auf die Frage

1

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

Mehrere Probleme:

Dies kann mehr zum Thema Stack Overflow sein.
So verwenden Sie nicht getElementsByClassName; Es werden nicht mehrere Klassen gleichzeitig ausgeführt.
Für richtige CSS-Selektoren möchten Sie querySelectorAll^Doc .
grid_8und pt5sind keine robusten Ziele. Sie werden sich wahrscheinlich häufig ändern.
Ein besserer CSS-Pfad wäre etwa so:
.querySelectorAll ('.displayInlineTable input:checked')(Siehe den Code unten.)
Möglicherweise lädt Ihre Webseite die Kontrollkästchen dynamisch (über AJAX). Wenn dies der Fall ist, müssen Sie AJAX- fähige Methoden wie waitForKeyElements verwenden .

Also für eine statische Webseite:

Code wie so funktioniert:

var chkdItems = document.querySelectorAll (".displayInlineTable input:checked");  console.log ("Checked Items:\n--------------");  chkdItems.forEach ( (chkBox, J) => { console.log (J, ": ", chkBox.value); } );

Sehen Sie sich eine Live-Demo bei jsFiddle an .

Für eine dynamische (AJAX) Webseite:

Ein vollständiges Greasemonkey / Tampermonkey-Skript funktioniert wie folgt:

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

Beachten Sie, dass auch jQuery genutzt wird, was normalerweise eine gute Idee ist.

Checkbox-Titel in mehreren Divisionen extrahieren (Javascript)

1 Antwort auf die Frage

Verwandte Probleme