Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

経緯

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

そしてそれを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';
    }
}

image.png

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

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

コードの解説

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

目的

ページ内のチェックボックスにチェックを付けたい。そのためにしないといけないことは
1. ページ内のチェックボックスをすべて取得
2. 取得したチェックボックスにチェックをつける

実装方法

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

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

チェックボックスはすべて、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';
    }
}

おまけ

もし、「参照アクセス権」の箇所だけチェックを付けたい場合はどうすればいいでしょうか。
(画像の左側のチェックボックスだけ)
image.png
もう一度HTMLを見てみると
image.png
どうやら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';
    }
}

実行すると以下のようになります。
image.png
参照アクセス権のところだけすべてチェックがつきました。

まとめ

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした