#概要
複数のチェックボックスがあるWebページで、特定のチェックボックスをONにするためのブックマークレット。
#想定ケース
例えば以下のようなWebページにて、項目002, 003, 005 のチェックボックスを一括でONにしたい場合を想定する。
各チェックボックスのname属性はすべて同じで、value属性が異なる。
<td><input type="checkbox" name="HOGE" value="HOGE001" checked> 項目001 </input></td>
<td><input type="checkbox" name="HOGE" value="HOGE002"> 項目002 </input></td>
<td><input type="checkbox" name="HOGE" value="HOGE003"> 項目003 </input></td>
#コード
以下のコードの"HOGE002"等の部分に、チェックしたい項目のvalue属性の値を入れる。これを一行にしてBookmarkletとして保存する。
Closure Compiler Serviceなど使うと便利。
javascript:(
function(){
var arr = ["HOGE002","HOGE003","HOGE005"];
var e = document.getElementsByTagName("input");
for(i = 0; i < e.length; i++){
var ei = e[i].value;
if(arr.indexOf(ei) >= 0){
e[i].checked = true;
}
}
}
)();
javascript:(function(){var arr=["HOGE002","HOGE003","HOGE005"];var e=document.getElementsByTagName("input");for(i=0;i<e.length;i++){var ei=e[i].value;if(arr.indexOf(ei)>=0)e[i].checked=true}})();
①オンにするチェックボックスのvalue属性の値を配列arrとして定義する。
②document.getElementsByTagName()で対象ページ上のチェックボックスを全て取得する。
③forループを回し、各チェックボックスのvalue値をひとつずつ ei に代入。
④最初に定義した配列arrの中にei の値があれば、そのチェックボックスはチェック対象。
チェックボックスをオン(checked = true)にする。
#補足
①のようにわざわざ配列で定義しなくてもよい。
ただ、最初に対象を定義しておくと「対象のチェックボックスをちょっと変えたい」という場合に修正しやすいだろうし、対象が増えた場合でも書きやすいかと思う。
配列使わずif文でゴリ押しすると↓こんな感じ?
javascript:(
function(){
var e = document.getElementsByTagName("input");
for(i = 0; i < e.length; i++){
var ei = e[i].value;
if(ei == 'HOGE002' || ei == 'HOGE003'){
e[i].checked = true;
}
}
}
)();
②③は本当はvalue属性の値を指定して、対象のチェックボックスだけ取得したかった。
例えば document.getElementByValue("HOGE002") みたいに。
でもそんなメソッドは無いらしい。 仕方ないので、タグ名指定で全てのinputタグの要素を取得する。
チェックボックス以外のinputタグ(テキストボックス等)も取得されるはずだけど、特に困らなかったので気にしなかった。
④は配列arrの中に "HOGE002" があるか?という判定をするだけ。
"exists"とか"contains"とかのメソッドが無いらしいので、indexOf()で代用(*1 参考)。
配列内に見つからなければ負の値を返すので、戻り値が 0 以上なら存在すると判定。
#派生ケース
特定のチェックボックス "だけ" にチェックを入れたい場合。
すなわち、デフォルトでチェックが入っているが、不要なチェックは外したい場合。
javascript:(
function(){
var arr = ["HOGE002","HOGE003","HOGE005"];
var e = document.getElementsByTagName("input");
for(i = 0; i < e.length; i++){
e[i].checked = false;
var ei = e[i].value;
if(arr.indexOf(ei) >= 0){
e[i].checked = true;
}
}
}
)();
for文の最初に e[i].checked = false; を入れるだけ。
チェックしない対象を羅列した配列を用意して、それに合致したらfalseにする・・・というのを一瞬考えたけど、そんな必要はないね。
#背景
50個くらいのチェックボックスのうち特定の20個くらいをチェクして結果出力、という作業を業務で何十回もやる必要があった。どのチェックボックスをチェックすればよいか覚えられないし、チェックするのにめちゃくちゃ時間がかかるし、チェックも漏れがちだし、嫌いすぎて自動化したかった。調べてみたらブックマークレットというものを知り、適当に書いてみたら自動化できたので嬉しさのあまり投稿。
・・・たぶん普通に生きていたらこんなブックマークレット使う機会はないと思う。
#参考
(*1) Javascriptで配列にある値が存在するかどうかを確認する方法について - プログラミングを勉強するブログ
https://artgear.hatenablog.com/entry/20130124/javascript_array_contain_how_to