JavaScriptでチェックボックスの選択状態を取得する

ここでは、JavaScript でチェックボックスがチェックされているかどうかを判定する方法について説明します。チェックボックスの状態を取得するためには、input 要素オブジェクトの checked プロパティを使います。

チェックボックスに同じ name 属性が付与されている場合

ひとまとまりのチェックボックスに対して同じ name 属性が与えられている場合、name 属性を使って各チェックボックスを特定し、それぞれのチェックボックスの checked プロパティが true か否かを順番に調べます。次のサンプルプログラムを見てみましょう。

HTML

JavaScript

任意のチェックボックスがチェックされているか否かはチェックボックスを表すinput要素オブジェクトのcheckedプロパティで判定します。checkedは、チェックボックスがチェックされていればtrueを返し、チェックされていなければfalseを返します。

任意のチェックボックスは、以下のようにして特定します。

例えば、一番目の「りんご」のチェックボックスがチェックされているか否かは次のように記述します。

上記のサンプルでは、for文を用いて各チェックボックスがチェックされているかどうかを順番に判定しています。

name 属性が付与されていない場合

チェックボックスに name 属性が付与されていない場合は、elements[] を使ってチェックボックスを特定します。

HTML

JavaScript

elements[]は form の要素(ここでは input タグ)を配列の形で持つため、name 属性が付与されていなくとも各チェックボックスを特定し、各チェックボックスがチェックされているかを順番に判定しています。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集