任意のチェックボックスをONにするブックマークレット

概要

複数のチェックボックスがあるWebページで、特定のチェックボックスをONにするためのブックマークレット。

想定ケース

例えば以下のようなWebページにて、項目002, 003, 005 のチェックボックスを一括でONにしたい場合を想定する。
各チェックボックスのname属性はすべて同じで、value属性が異なる。

chekbox.html

  <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