私は、チェックボックスにチェックが入っているすべての項目の洗練されたリストを作成する 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
いくつかの問題:
- これは Stack Overflow でより話題になるかもしれません。
- それは使用方法ではありません
getElementsByClassName
。一度に複数のクラスを実行することはありません。 - 適切なCSSセレクター、あなたが望む
querySelectorAll
ドク。 grid_8
これらはpt5
堅牢なターゲットではありません。頻繁に変更される可能性があります。
より適切な CSS「パス」は次のようになります:
.querySelectorAll ('.displayInlineTable input:checked')
(以下のコードを参照してください)。- ウェブページがチェックボックスを動的に(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 も活用していることにも注意してください。これは通常、良いアイデアです。