一瞬でチェックボックスすべてにチェックを入れた話

chrome使っていることを前提とします。
僕と同じ新人の方とかに「プログラミングがこんな簡単に業務に活かせたよ」というのを伝えたいです。

経緯

業務でページ内のチェックボックスすべてにチェックを入れて保存ボタンを押下する作業が発生しました。

そしてそれを10ページ分以上やらないといけませんでした。

嫌すぎる…。

ページ内のチェックボックスすべてにチェックをするコード

ということで、JavaScriptでページ内のチェックボックスにチェックをいれます。
f12で検証を開いてConsoleタブ内に下記のJavaScriptコードを入力してEnterを押下します。

let chk = document.getElementsByTagName('input');
for (let i = 0; i < chk.length; i++) {
    if (chk[i].type=='checkbox'){
        chk[i].checked='checked';
    }
}

すると画面が以下のようになります。

全部にチェックがついていますね。
保存を押して終わりです。やったね。

コードの解説

目的→実装方法の順で見ていきます。

目的

ページ内のチェックボックスにチェックを付けたい。そのためにしないといけないことは

1. ページ内のチェックボックスをすべて取得
2. 取得したチェックボックスにチェックをつける

実装方法

ページ内のチェックボックスをすべて取得する方法

検証のElementからチェックボックスを見てみます。

チェックボックスはすべて、inputタグの中にあり、type="checkbox"となっています。（そりゃそうだ）
つまり、inputタグの内容、HTMLCollection を取得できればtypeを指定してチェックボックスを取得できそうです。

以下のようにdocument.getElementsByTagNameでinputタグのHTMLCollectionを取得できます。

let chk = document.getElementsByTagName('input'); 

inputタグのHTMLCollectionが取得できたので、type='checkbox'だったら、チェックをつけます。

for (let i = 0; i < chk.length; i++) {
    if (chk[i].type=='checkbox'){
        // ここにチェックをつける処理
    }
}

取得したチェックボックスにチェックをつける方法

checkboxはcheckedを付与すればチェックがつきます。

chk[i].checked='checked';

先ほどの処理の部分に追加して

let chk = document.getElementsByTagName('input');
for (let i = 0; i < chk.length; i++) {
    if (chk[i].type=='checkbox'){
        chk[i].checked='checked';
    }
}

おまけ

もし、「参照アクセス権」の箇所だけチェックを付けたい場合はどうすればいいでしょうか。
(画像の左側のチェックボックスだけ)

もう一度HTMLを見てみると

どうやらtitleで参照アクセス権と編集アクセス権で分けられているようです。
よって、条件文に「titleが参照アクセス権のとき」を追加すればよさそうです。

let chk = document.getElementsByTagName('input');
for (let i = 0; i < chk.length; i++) {
    if (chk[i].type=='checkbox'
        && chk[i].title=='参照アクセス権'){
        chk[i].checked='checked';
    }
}

実行すると以下のようになります。

参照アクセス権のところだけすべてチェックがつきました。

まとめ

今回はたったの6行で2時間かかる作業が5分とかからず終わらせることができました。作成時間を含めてもおつりが来ます。
しかも、こういう自分が楽になるものを作るのって楽しいですよね。

プログラミングは自分たちのめんどくさい作業を発見するところから始まると思います。
プログラマー三大美徳の「怠慢」につながるところだと思います。
今後も自分の「めんどくさい」を見つけてそこから技術を発展させていけるように精進していきたいです。