HTMLでフォーム内に組み込んだチェックボックス。
そのデータを扱いたい時は、JavaScriptやPHPを使って値を取得する必要があります。
ここでは、そんな「チェックボックスの値を取得する方法」をわかりやすく紹介していきます！
HTMLの「チェックボックス」記述方法
まずは念のために、チェックボックスを使うためのHTMLコードを確認しておきましょう。
<input type="checkbox" value="値" name="要素">
これが基本的な形となります。
「value」に取得したい値を入れるのがポイントですね。ここに入力した値を受け取ることができます。
「name」は、どんな要素（項目）のチェックボックスなのかを知りたい時に記述しましょう。
メールで入力したデータを受け取る時も、これらにしっかり名前をつけておかないと何のことか分からなくなります。
複数のデータを管理する場合は特に気を付けましょう。
ちなみに補足情報ですが、HTMLのチェックボックスに似ている「ラジオボタン」。
<input type="radio" value="値" name="要素">
チェックボックスと違う点は”１つしかチェックできない”というところです。
複数選択OKの場合はチェックボックスを使って、1つしか選択させたくないときはラジオボタンを使用します。
値の取得など使い方は全く同じなので、状況に応じて使い分けてみてください。
チェックボックスの値を取得するコード
それではここからは、実際のHTMLコードを見ながらチェックボックスの値を取得する方法を見ていきましょう。
ちなみに今回紹介するのは、一番簡単な「JavaScript」を使った取得方法です。
まずは基準となるHTMLコード。（以降はこのコードをもとに解説していきますね）
<form method=”post” action="">
<input id="checbox1" type="checkbox" value="値１">
<input id="checbox2" type="checkbox" value="値２">
<input id="checbox3" type="checkbox" value="値３">
</form>分かりやすくチェックボックスを3つ用意。
それぞれ「値1」「値2」「値３」というvalueを設定し、それぞれのチェックボックスを区別するためにidを割り振っておきました。
チェックボックスの値を取得する際は、この「id名」をもとにして呼び出すことができます。
JavaScriptを使ってチェックボックスの値を取得
そして、上記チェックボックスの値を取得する際のJavaScriptコードがこちらです。
document.getElementById("checbox1").value;
document.getElementById("checbox2").value;
document.getElementById("checbox3").valuegetElementById()を使い、割り振っておいたid名を指定しています。これで特定のチェックボックスの値のみ取り出せます。
ちなみに、getElementById()の使い方はこちらの記事にまとめてあるのでチェックしてみてください。
また、実際にこの値を使いたいときは変数に格納してから使うのが便利。
こんな感じです。
var checkbox1 = document.getElementById("checbox1").value;「checkbox1」という名前の変数に値を格納しています。
先ほどのコード自体が値そのものを表しているので、それを直接値を入れたい箇所に埋め込むのもありなんですが、変数にしておくことで値を呼び出すのが楽になります。
コードもスッキリしますしね。
ユーザーがチェックボックスで選択した値を使ってコードを組み立てる時や、単純に値を出力したい時にはこの取得方法が簡単です。
ぜひ試してみてください！
