☰

複数の div 内のチェックボックスのタイトルを抽出する (Javascript)

tag-icon • tag-icon javascript greasemonkey
複数の div 内のチェックボックスのタイトルを抽出する (Javascript)

私は、チェックボックスにチェックが入っているすべての項目の洗練されたリストを作成する Greasemonkey スクリプトを書こうとしています。チェックボックスのリストは週ごとに変わる可能性があり、数百の項目が含まれています。こここれは、クラス名ですべての要素を取得することで実行できることを学びました。getElementsByClassName('class_name')

しかし、要素のリストを取得することはもちろん、そこから値を取得することもできません。

こちらはサイトの簡易版です。

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

私は JSFiddle でこれを試してみましたが (アラート ボックスでチェックされた値を確認するだけ)、私のプレイ コードではうまくいかないようです。

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

最終的には、チェックされた各項目のタイトルを改行で区切って、横のテキスト ボックスに書き込む予定です。

サイト上のチェックボックス（この特定のテーブル内、他にも多くのテーブルがあります）を特定し、それらを反復処理して、該当する場合はタイトル値のみを取得する方法はありますか?

答え1

いくつかの問題:

  1. これは Stack Overflow でより話題になるかもしれません。
  2. それは使用方法ではありませんgetElementsByClassName。一度に複数のクラスを実行することはありません。
  3. 適切なCSSセレクター、あなたが望むquerySelectorAllドク。
  4. grid_8これらはpt5堅牢なターゲットではありません。頻繁に変更される可能性があります。
    より適切な CSS「パス」は次のようになります:
    .querySelectorAll ('.displayInlineTable input:checked')(以下のコードを参照してください)。
  5. ウェブページがチェックボックスを動的に（AJAX経由で）読み込む可能性があります。その場合は、次のようなAJAX対応メソッドを使用する必要があります。キー要素を待つ。

それで、静的ウェブページの場合:

次のようなコードが動作します:

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

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

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

を参照してくださいjsFiddle のライブデモ。

動的 (AJAX) Web ページの場合:

次のような完全な Greasemonkey/Tampermonkey スクリプトが動作します:

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

また、jQuery も活用していることにも注意してください。これは通常、良いアイデアです。

関連情報