【jQuery】:checkedで選択されている要素を指定する!

選択されている要素を指定するにはjQueryで:checkedを使用します。

:checkedとはinput要素のチェックボックスやラジオボタンで選ばれている要素を指定する擬似クラスであり、下記のようなチェックボックスのチェック済みの値を指定することができます。

チェックボックス

要素1
要素2
要素3

ラジオボタン

要素1
要素2
要素3

また、:checkedで指定した値を条件式で条件分岐させることで、要素1がチェックされた場合はAの処理を行い、要素2がチェックされた場合はBの処理を行う」ように選択されている要素によって処理を変更することができます。

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

⚫︎ 選択されているチェックボックスを指定する場合
⚫︎ 選択されているラジオボタンを指定する場合
⚫︎ 選択されているチェックボックスとラジオボタンの両方を指定する場合

⚫︎ 選択されているかどうかで処理を変更する方法

ハルトさん

今回はjQueryで:checkedのチェックの入っている要素を指定する方法について説明していきます。

さとみさん

はい!
お願いします!

:checkedとは

:checkedとはinput要素のcheckboxやradioタイプで選ばれている要素を指定することができる擬似クラスとなります。

:checkedの書き方

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

$の()に「セレクタ:checked」を指定することで、セレクタでチェックされた要素を指定することができます。

選択されている要素を指定するサンプルコード

選択されている要素を指定するサンプルコードを紹介します。

選択されているチェックボックスを指定する場合

:checkedで選択されているチェックボックスを指定してみます。

sample.html

index.js

出力結果

:checkedによって選択されているチェックボックスの値を指定しています。
そのため、ボタンを押すと、画面とコンソールにチェック済みの値が表示されます。

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

選択されているラジオボタンを指定する場合

:checkedで選択されているラジオボタンを指定してみます。

sample.html

index.js

出力結果

:checkedによってラジオボックスで選択された要素を指定することができます。
そのため、ボタンを押すと、選択されているラジオボタンの値が表示されます。

選択されているチェックボックスとラジオボタンの両方を指定する場合

:checkedで選択されているチェックボックスとラジオボタンの両方を指定してみます。

sample.html

index.js

出力結果

:checkedでチェック済のチェックボックスと選択されたラジオボタンの両方を指定することができます。

選択されているかどうかで処理を変更する方法

条件文を使用して選択されているかどうかで処理を変更してみます。

sample.html

index.js

出力結果

条件文を使用して選択されているかどうかで処理を変更してます。

さとみさん

条件文を使用することで、選択されているかどうかで処理を変更していますね!

ハルトさん

そうですね。
サンプルコードでは選択されている要素によって処理する内容を変えていますが、「チェックボックス4-1がチェックされた場合はAの処理を行い、チェックボックス4-2がチェックされた場合はBの処理を行う」ように選択された要素によって処理を変更することもできます。

今回のポイント

:checkedで選択されてた要素を指定

⚫︎ jQueryで選択された要素を指定するには擬似クラスである:checkedを使用する

⚫︎ 選択されたチェックボックスを指定する場合は:checkedの前に:checkboxを指定する

⚫︎ 選択されたラジオボタンを指定する場合は:checkedの前に:radioを指定する

⚫︎ 選択されたチェックボックスとラジオボタンを同時に指定する場合は:checkedをそのまま使用する

⚫︎ 条件文を使用することで選択されているかどうかで処理を変更することができる

関連記事

:checkboxを使用してjQueryでチェックボックスを指定する方法についてはこちらをご参考ください。

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

Writer
壷井

壷井

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

最新の案件情報

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