Webサイト制作コースのお申し込みはこちら Webサイト制作コースのお申し込みはこちら

Webアプリを作成する際、チェックボックスによる項目選択は頻出処理の1つです。

本記事では、HTMLでチェックボックスを作成する方法と基本的な使い方についてご紹介していきたいと思います。

HTMLでチェックボックスの基本的な作り方


チェックボックスの主な利用用途としては、特定の選択肢の中から、複数選択可能な項目を作成したい場合に利用されます。

まずはHTMLでチェックボックスを作成する基本構文を確認していきましょう。

チェックボックスを作成する基本構文

HTMLでチェックボックスを作成する場合、inputタグのtype属性に「checkbox」を指定することで、簡単に実装することが可能です。

下記が最も基本となるチェックボックスを作成するためのコードです。

  1. <input type="checkbox">

ここから更に様々な属性を追加して、実装していきます。

inputタグの属性

inputタグの属性で頻繁に利用するものを確認しておきましょう。

  • value
  • name
  • checked
  • diabled

value

サーバーなどに送信するための「値」を設定することが可能です。

ブラウザ上で表示するための名前は、別途「label」タグなどで実装する必要があります。

name

名前を指定することで、グループ化することが可能です。

複数のチェックボックスに対し、同じ名前を設定することで1つのグループとして認識されます。

checked

チェックボックスが選択されているかの有無を管理します。

正式な記述方法は「checked=”checked”」ですが、「checked」と記述するだけでも選択状態であることを表します。

disabled

チェックボックスの使用可否状態を表します。

「disabled」が設定されている場合には、チェックボックスが無効化(画面表示有り)され、何も設定しない場合には有効化状態を表します。

簡単なチェックボックス作成サンプル

上述したチェックボックスの作成方法と属性を使用して、ブラウザ上にチェックボックスを表示してみたいと思います。

index.html

  1. <!doctype html>
  2. <html lang="jp">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Checkbox sample</title>
  6. </head>
  7. <body>
  8.   <label>
  9.     <input type="checkbox" name="checkbox-name" value="1">
  10.     チェックボックス1
  11.   </label>
  12.   <label>
  13.     <input type="checkbox" name="checkbox-name" value="2" checked>
  14.     チェックボックス2
  15.   </label>
  16.   <label>
  17.     <input type="checkbox" name="checkbox-name" value="3" disabled>
  18.     チェックボックス3
  19.   </label>
  20. </body>
  21. </html>

ブラウザ上で表示した結果が下記のキャプチャとなります。

チェックボックス2に「checked」属性を設定しているため、画面上でも選択状態になっていることがご確認頂けます。

また、少し確認しづらいですが、チェックボックス3には「disabled」属性を設定しているため、半透明のチェックボックスとなり、選択することが出来なくなっています。

それぞれのチェックボックスの「name」属性には、同じ名前を設定しており、「value」属性には異なる値を設定しています。

この部分の動きについては、後述する基本的な使い方でご確認ください。

HTMLチェックボックスの基本的な使い方


HTMLでチェックボックスを作成出来たところで、実際の使い方についてご紹介していきたいと思います。

最も一般的な使い方は、チェックボックスとボタンをセットで用意して、ボタンが押下された際に、チェックされている値を送信するというものです。

サンプルコード

実際にHTMLとJavascriptで、チェックボックスを利用した簡単なサンプルコードをご紹介していきたいと思います。

今回のサンプルでは、ボタンをクリックした際に、選択状態のチェックボックスを判定し、メニューの名前を表示するというものです。

index.html

  1. <!doctype html>
  2. <html lang="jp">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Checkbox sample</title>
  6.   <script src="sample.js"></script>
  7. </head>
  8. <body>
  9.   <form name="sampleForm" action="">
  10.     <label>
  11.       <input type="checkbox" name="menu" value="カレー">
  12.       カレー
  13.     </label>
  14.     <label>
  15.       <input type="checkbox" name="menu" value="焼肉">
  16.       焼肉
  17.     </label>
  18.     <label>
  19.       <input type="checkbox" name="menu" value="寿司">
  20.       寿司
  21.     </label>
  22.     <input type="button" onclick="execute()" value="確認">
  23.   </form>
  24.  
  25.   <div id="result"></div>
  26. </body>
  27. </html>

sample.js

  1. function execute() {
  2.     var curry = document.sampleForm.menu[0];
  3.     var yakiniku = document.sampleForm.menu[1];
  4.     var sushi = document.sampleForm.menu[2];
  5.     var result = document.getElementById("result");
  6.     result.innerHTML = "";
  7.     var none = true;
  8.  
  9.     if(curry.checked) {
  10.         result.innerHTML = curry.value + "が選択されています。
  11. ";
  12.         none = false;
  13.     }
  14.  
  15.     if(yakiniku.checked) {
  16.         result.innerHTML += yakiniku.value + "が選択されています。
  17. ";
  18.         none = false;
  19.     }
  20.  
  21.     if(sushi.checked) {
  22.         result.innerHTML += sushi.value + "が選択されています。
  23. ";
  24.         none = false;
  25.     }
  26.  
  27.     if(none) {
  28.         result.innerHTML = "何も選択されていません。";
  29.     }
  30.  
  31. }

上記サンプルコードをブラウザ上で実行した画面キャプチャが、下記の通りとなります。

サンプルコードの解説

今回はサーバーを経由せずに、フロントエンドの処理だけでチェックボックスの値を判定しています。

下記のJavascriptでは、name属性が「sampleForm」の内側にある「menu」という名前の要素を取得しています。

チェックボックスのname属性に全て同じ名前を設定しており、プログラム側では配列として取得することが可能です。

  1.     var curry = document.sampleForm.menu[0];
  2.     var yakiniku = document.sampleForm.menu[1];
  3.     var sushi = document.sampleForm.menu[2];

次に、取得したチェックボックスの要素が選択状態かの判定を下記のコードで確認しています。

選択されている場合、チェックボックスの要素から「value」値を取得し、結果表示用のdivタグに対して出力するよう設定しています。

2番目以降の要素は「+=」とすることで、テキストを追加する形で表示しています。

  1.     if(curry.checked) {
  2.         result.innerHTML = curry.value + "が選択されています。
  3. ";
  4.         none = false;
  5.     }
  6.  
  7.     if(yakiniku.checked) {
  8.         result.innerHTML += yakiniku.value + "が選択されています。
  9. ";
  10.         none = false;
  11.     }
  12.  
  13.     if(sushi.checked) {
  14.         result.innerHTML += sushi.value + "が選択されています。
  15. ";
  16.         none = false;
  17.     }

さいごに：HTMLでチェックボックスを活用した複数選択肢の提示はWebアプリ作成の基本


本記事では、HTMLでチェックボックスを作成する方法と基本的な使い方についてご紹介してきました。

Webアプリ作成において、チェックボックスの使い方は必須知識の1つです。

実務でも頻繁に利用されますので、どういった仕組みで動いているのかを把握し、実際に手を動かしながら理解を深めてみてください。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか？

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。