0
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

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

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

0
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?