JavaScriptでチェックボックスの選択状態を取得する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでチェックボックスの選択状態を取得する方法について現役エンジニアが解説しています。チェックボックスはHTMLのフォーム要素になります。チェックボックスの状態はchecked属性で判別します。checked属性がtrueかどうか判定してみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでチェックボックスの選択状態を取得する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでチェックボックスの選択状態を取得する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

チェックボックスの選択状態について

HTML要素にチェックボックスがあります。チェックボックスは複数の選択を行うような場合に使用する要素です。

チェックボックスはHTMLでは以下のように記述します。その際「checked」という属性を記述することで、チェックされた状態となります。

 
<input type="checkbox" name="options" value="禁煙" checked> 禁煙

 

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

JavaScriptでチェックボックスがチェックされているか、状態を取得するには「checked」属性を使用します。チェックされていればtrueとなります。

要素.checked

前述の通り、チェックボックスは複数の選択を行うような場合に使用します。そのためチェックボックスを使用する際は以下のようにするのが一般的です。

  • HTMLで複数のチェックボックスに同じ「name」属性を指定する
  • JavaScriptでは「getElementsByName」関数でチェックボックス要素を取得する
  • for文などの繰り返し構文で順番にチェックされているか評価を行う

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

今回のサンプルプログラムでは一般的なチェックボックスの評価方法について確認していきます。実行結果はデベロッパーツールのコンソールに出力されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>sample</title>
</head>
<body>
  <input type="checkbox" name="options" value="禁煙" checked> 禁煙
  <input type="checkbox" name="options" value="朝食付き"> 朝食付き
  <input type="checkbox" name="options" value="温泉"> 温泉
  <input type="button" value="確認" onclick="func1()"/>

  <script language="javascript" type="text/javascript">
    const func1 = () => {
      const elements = document.getElementsByName("options");

      console.log("--- 選択したオプションは以下の通りです ---");

      for (let i=0; i<elements.length; i++){
        if (elements[i].checked){
          console.log(elements[i].value);
        }
      }
   }
  </script>
</body>
</html>

確認ボタンを押すと、チェックされたチェックボックスの value 属性がコンソールに出力されます。

--- 選択したオプションは以下の通りです ---
禁煙
温泉

 

筆者プロフィール

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。