2018.06.27HTMLでフォーム内に組み込んだチェックボックス。そのデータを扱いたい時は、JavaScriptやPHPを使って値を取得する必要があります。ここでは、そんな「チェックボックスの値を取得する方法」をわかりやすく紹介していきます!目次HTMLの「チェックボックス」記述方法チェックボックスの値を取得するコードJavaScriptを使ってチェックボックスの値を取得スポンサーリンクHTMLの「チェックボックス」記述方法まずは念のために、チェックボックスを使うためのHTMLコードを確認しておきましょう。name="要素">これが基本的な形となります。「value」に取得したい値を入れるのがポイントですね。ここに入力した値を受け取ることができます。「name」は、どんな要素(項目)のチェックボックスなのかを知りたい時に記述しましょう。メールで入力したデータを受け取る時も、これらにしっかり名前をつけておかないと何のことか分からなくなります。複数のデータを管理する場合は特に気を付けましょう。ちなみに補足情報ですが、HTMLのチェックボックスに似ている「ラジオボタン」。name="要素">チェックボックスと違う点は”1つしかチェックできない”というところです。複数選択OKの場合はチェックボックスを使って、1つしか選択させたくないときはラジオボタンを使用します。値の取得など使い方は全く同じなので、状況に応じて使い分けてみてください。チェックボックスの値を取得するコードそれではここからは、実際のHTMLコードを見ながらチェックボックスの値を取得する方法を見ていきましょう。ちなみに今回紹介するのは、一番簡単な「JavaScript」を使った取得方法です。基準となるHTMLコード。value="値3"></form>分かりやすくチェックボックスを3つ用意。それぞれ「値1」「値2」「値3」というvalueを設定し、それぞれのチェックボックスを区別するためにidを割り振っておきました。チェックボックスの値を取得する際は、この「id名」をもとにして呼び出すことができます。JavaScriptを使ってチェックボックスの値を取得そして、上記チェックボックスの値を取得する際のJavaScriptコードがこちらです。document.getElementById("checbox1").value;document.getElementById("checbox2").value;document.getElementById("checbox3").valuegetElementById()を使い、割り振っておいたid名を指定しています。これで特定のチェックボックスの値のみ取り出せます。ちなみに、getElementById()の使い方はこちらの記事にまとめてあるのでチェックしてみてください。あわせて読みたいgetElementByIdの使い方は?ダイレクトアクセスで簡単にノードを取得また、実際にこの値を使いたいときは変数に格納してから使うのが便利。document.getElementById("checbox1").value;「checkbox1」という名前の変数に値を格納しています。先ほどのコード自体が値そのものを表しているので、それを直接値を入れたい箇所に埋め込むのもありなんですが、変数にしておくことで値を呼び出すのが楽になります。コードもスッキリしますしね。ユーザーがチェックボックスで選択した値を使ってコードを組み立てる時や、単純に値を出力したい時にはこの取得方法が簡単です。試してみてください!web制作JavaScriptTwitterFacebookはてブPocketLINE今村りょうCooNelNelスポンサーリンクスポンサーリンクスポンサーリンクスポンサーリンクプロフィール今村りょう普段は家でブログ、アフィリエイト、ネットショップをやってます。趣味は料理と家飲みです。みの牛すじカレー!お取り寄せレトルトカレーの魅力2020.02.10活きたうなぎを捌いて「蒲焼き」と「白焼き」を作ってみた2020.01.23民芸コンロを使ってちょっと贅沢な家飲みを!卓上七輪としても使えます2020.01.19焼き鳥との相性97%以上の日本酒「純米吟醸94(きゅうじゅうよん)」で家飲み!2020.01.13熊本馬刺しは熊本産じゃない!?「純熊本産馬刺し」は全国流通たったの1%2019.12.18ポテトサラダにクリームチーズを加えて居酒屋風ポテサラを作る!2019.11.29きびなごの刺身の漁師漬けが酒のつまみとして最高な件2019.11.21プロフィール今村りょう料理が好きな家飲みブロガーです。お店ではなく、家でゆったり飲む「家飲み」の情報を発信中。普段は在宅でwebのお仕事してます!包丁に関する知識や、家で魚を捌いて食べる楽しさを発信する「包丁日記」も運営中。CooNelNel.。