Extract Checkbox Titles within Multiple Divs (Javascript)

Question

I am attempting to write a Greasemonkey script that puts together a refined list of all items that have a check in their checkbox. The list of check boxes can vary from week to week and contains hundreds of items. Looking here I have learned that this can be done by pulling all elements by class name: getElementsByClassName('class_name')

However, I am failing to get the list of elements, let alone grab the values from it.

Here is a simplified version of the 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>

I have attempted to play with this on JSFiddle (just see checked values in alert box) but my play code seems to break it.

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

Ultimately, I plan to take each item that is checked and write it's title into a text box off to the side, each separated by newlines.

Is there a way to determine what check boxes are on the site (within this particular table, as there are many other tables too) and iterate through them, pulling just the title values when applicable?

Answer 1

Several issues:

1. This may be more on topic at Stack Overflow.
2. That's not how you use getElementsByClassName; it doesn't do multiple classes at once.
3. For proper CSS selectors, you want querySelectorAll^Doc.
4. grid_8 and pt5 are not robust targets. They are likely to change frequently.
   A better CSS "path" would be something like:
   .querySelectorAll ('.displayInlineTable input:checked') (See the code, below.)
5. It may be that your web page loads the checkboxes dynamically (via AJAX). If that is true, you need to use AJAX-aware methods such as waitForKeyElements.

So, for a static web page:

Code like so will work:

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

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

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

See a live demo at jsFiddle.

---

For a dynamic (AJAX) web page:

A complete Greasemonkey/Tampermonkey script, like so, will work:

// ==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 that it also leverages jQuery, which is usually a good idea.