Trích xuất các tiêu đề hộp kiểm trong nhiều Div (Javascript)

Tôi đang cố gắng viết một tập lệnh Greasemonkey để tập hợp một danh sách tinh chỉnh tất cả các mục có một hộp kiểm trong hộp kiểm của chúng. Danh sách các hộp kiểm có thể thay đổi từ tuần này sang tuần khác và chứa hàng trăm mặt hàng. Nhìn vào đây tôi đã học được rằng điều này có thể được thực hiện bằng cách kéo tất cả các thành phần theo tên lớp:getElementsByClassName('class_name')

Tuy nhiên, tôi không nhận được danh sách các yếu tố, chứ đừng nói đến việc lấy các giá trị từ nó.

Đây là một phiên bản đơn giản hóa của trang web.

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

Tôi đã cố gắng chơi với cái này trên JSFiddle (chỉ thấy các giá trị được kiểm tra trong hộp cảnh báo) nhưng mã chơi của tôi dường như phá vỡ nó.

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

Cuối cùng, tôi dự định lấy từng mục được kiểm tra và viết tiêu đề của nó vào một hộp văn bản sang một bên, mỗi mục được phân tách bằng các dòng mới.

Có cách nào để xác định hộp kiểm nào trên trang web (trong bảng cụ thể này không, vì có nhiều bảng khác nữa) và lặp qua chúng, chỉ lấy các giá trị tiêu đề khi áp dụng?

Một số vấn đề:

1. Đây có thể là nhiều hơn về chủ đề tại Stack Overflow.
2. Đó không phải là cách bạn sử dụng getElementsByClassName; nó không làm nhiều lớp cùng một lúc.
3. Đối với các bộ chọn CSS thích hợp , bạn muốn querySelectorAll^Doc .
4. grid_8và pt5không phải là mục tiêu mạnh mẽ. Họ có khả năng thay đổi thường xuyên.
   Một "đường dẫn" CSS tốt hơn sẽ là một cái gì đó như:
   .querySelectorAll ('.displayInlineTable input:checked')(Xem mã bên dưới.)
5. Có thể là trang web của bạn tải các hộp kiểm một cách linh hoạt (thông qua AJAX). Nếu đó là sự thật, bạn cần sử dụng các phương thức nhận biết AJAX như WaitForKeyElements .

Vì vậy, đối với một trang web tĩnh:

Mã như vậy sẽ hoạt động:

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

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

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

Xem bản demo trực tiếp tại jsFiddle .

Đối với trang web động (AJAX):

Một tập lệnh Greasemonkey / Tampermonkey hoàn chỉnh, như vậy, sẽ hoạt động:

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

Lưu ý rằng nó cũng tận dụng jQuery, thường là một ý tưởng tốt.