【jQuery】:checkboxでチェックボックスの値を指定する!

チェックボックスの値を指定するにはjQueryで:checkboxを使用します。

:checkboxとはinput要素のcheckboxを指定する擬似クラスであり、下記のようなチェックボックスの値を指定することができます。

チェックボックス

1
2
3

:checkboxで指定すると、全てのチェックボックスを指定することになりますので、:checkboxの後ろにname属性を指定すると、特定のチェックボックスの値のみを取得することができ、:checkedを指定することでチェックされた値のみを取得することができます。

また、prop()メソッドやval()メソッドを使用することで、チェックボックスにチェックをつけたり、外したりすることもできます。

今回は、jQueryで:checkboxを使ってチェックボックスの値を指定する方法について以下の内容で解説していきます。

⚫︎ チェックボックスの値を指定する
⚫︎ チェックされたチェックボックスの値を指定する場合

⚫︎ jQueryを使用せずにチェックボックスの値を指定する場合
⚫︎ 全てのチェックボックスにチェックをつける/外す方法
⚫︎ 特定のチェックボックスにチェックする方法

ハルトさん

今回はjQueryで:checkboxのチェックボックスの値を指定する方法について説明していきます。

さとみさん

はい!
お願いします!

:checkboxとは

:checkboxとはinput要素のcheckboxを指定することができる擬似クラスとなります。

:checkboxの書き方

:checkboxの書き方は下記となります。

$の()に「:checkbox」を指定することで、チェックボックスの値を指定することができます。
また、先頭にセレクタを指定することでセレクタのチェックボックスの値のみを指定することができます。

チェックボックスの値を指定するサンプルコード

:checkboxでチェックボックスの値を指定するサンプルコードを紹介します。
チェックボックスを指定する場合は:checkboxをそのまま使用します。

sample.html

index.js

出力結果

:checkboxによってチェックボックスの値を全て取得しています。
そのため、ボタンを押すと、画面とコンソールチェックボックスの値が表示されます。

また、:checkboxの後ろにnameを指定することで、特定のチェックボックスの値を全て取得しています。

さとみさん

:checkboxでチェックボックスの値を取得していますね!

ハルトさん

そうですね。
サンプルコードでは:checkboxの後ろにnameを指定していますが、クラス名やid名を指定しても特定のチェックボックスの値を取得できますよ。

チェックされたチェックボックスの値を指定する場合

チェックされたチェックボックスの値を指定する場合は:checkboxの後ろに:checkedという擬似クラスを指定します。

sample.html

index.js

出力結果

:checkedによってチェックボックスでチェックされた値を指定することができます。
そのため、ボタンを押すと、チェック済みの値が表示されます。

jQueryを使用せずにチェックボックスの値を指定する場合

jQueryを使用せず、純粋なJavaScriptでチェックボックスの値を指定してみます。

sample.html

index.js

出力結果

コンソールでチェックボックスの値を取得していることからjQueryを使用せずJavaScriptでチェックボックスの値を指定しています。

さとみさん

jQueryを使わず同じことを実行させようとすると、1つのコードが長くなりますね!
これだとjQueryの方が短いコードで実装できるので便利です!

ハルトさん

そうですよね。
コードの量や分かりやすさを比較するとあきらかにjQueryの方が良いですよね。

チェックボックスのチェックをつける/外す方法

チェックボックスのチェックをつけたり外したりする方法を紹介します。

全てのチェックボックスにチェックをつける/外す方法

チェックボックスのチェックをつけたり外したりするにはprop()メソッドを使用します。

sample.html

index.js

出力結果

prop()を使用することで全てのチェックボックスにチェックをつけています。
その為、「チェックをつける」ボタンを押すと全てのチェツクボックスにチェックがつき、「チェックを外す」ボタンを押すと、全てのチェツクボックスのチェックが外れます。

jQueryのprop()メソッドについて詳しく知りたい場合はこちらをご参考ください。

さとみさん

prop()メソッドで全てのチェックボックスにチェックをつけたり外したりしてますね!

ハルトさん

そうですね。
prop()メソッドの第2パラメータにtrueを指定するとチェックがつき、falseを指定するとチェックが外れるようになります。

特定のチェックボックスにチェックする方法

特定のチェックボックスにチェックするにはval()メソッドのパラメータにチェックをつけたい値を配列で指定します。

sample.html

index.js

出力結果

val()メソッドのパラメータにチェックをつけたい値を配列で指定することで、特定のチェックボックスにチェックすることができます。
その為、ボタンを押すと、免許書とパスポートにチェックがつきます。

今回のポイント

:checkboxでチェックボックスの値を指定

⚫︎ チェックボックスの値を指定するにはjQueryの擬似クラスである:checkboxを使用する

⚫︎ チェックされたチェックボックスの値を指定する場合は:checkboxの後ろに:checkedの擬似クラスを指定する

⚫︎ 全てのチェックボックスにチェックをつける/外すにはprop()メソッドを使用し、特定のチェックボックスにチェックをつける場合はval()メソッドを使用する

関連記事

:checkedを使用してjQueryで選択されている要素を指定する方法についてはこちらをご参考ください。

:radioを使用してjQueryでラジオボタンを指定する方法についてはこちらをご参考ください。

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し