JavaScriptでチェックボックスの値を取得・設定する完全ガイド

JavaScript

2024.01.192024.02.15

チェックボックスは、Webフォームの中でも特に多用される機能の一つです。これらを効果的に使うためには、JavaScriptを使用してユーザーの操作に応じて挙動を変える必要があります。

この記事では、HTMLとJavaScriptを使った基本的なチェックボックスの操作方法をわかりやすく解説します。チェックボックスの状態を取得し、それに基づいてページ上に結果を表示する簡単な例を通して、Web開発の基礎を学んでいきましょう。初心者でもすぐに理解できる内容ですので、ぜひ挑戦してみてください。

記事内のサンプルコードをコピペするだけで、JavaScriptでチェックボックスの値を取得・設定できます。

チェックされている項目: なし

りんご
ゴリラ
ラッパ

HTMLでチェックボックスを表示
1. HTMLサンプルコード
2. HTMLの解説
javascriptで値を取得・設定する
1. javascriptサンプルコード
2. javascriptの解説
チェックボックスの使用例

HTMLでチェックボックスを表示

HTMLサンプルコード

    <div id="checkboxStatus">チェックされている項目: なし</div>
    <input type="checkbox" id="checkbox1"> チェックボックス1<br>
    <input type="checkbox" id="checkbox2"> チェックボックス2<br>
    <input type="checkbox" id="checkbox3"> チェックボックス3<br>

    <button onclick="checkCheckboxes()">チェックボックスの状態をチェック</button>

HTMLの解説

<div id="checkboxStatus"> チェックされたチェックボックスの状態を表示するための要素。
<input type="checkbox" id="checkbox1"> チェックボックスを作成する。id属性を使って個々のチェックボックスを特定する。
<button onclick="checkCheckboxes()"> ボタン要素。クリックされるとcheckCheckboxes()関数が呼ばれる。

javascriptで値を取得・設定する

javascriptサンプルコード

// チェックボックスの状態をチェックする関数
function checkCheckboxes() {
    var checkBox1 = document.getElementById("checkbox1");
    var checkBox2 = document.getElementById("checkbox2");
    var checkBox3 = document.getElementById("checkbox3");
    var statusDiv = document.getElementById("checkboxStatus");

    var checkedBoxes = [];
    if (checkBox1.checked) {
        checkedBoxes.push("チェックボックス1");
    }
    if (checkBox2.checked) {
        checkedBoxes.push("チェックボックス2");
    }
    if (checkBox3.checked) {
        checkedBoxes.push("チェックボックス3");
    }

    if (checkedBoxes.length > 0) {
        statusDiv.textContent = "チェックされている項目: " + checkedBoxes.join("と");
    } else {
        statusDiv.textContent = "チェックされている項目: なし";
    }
}

javascriptの解説

function checkCheckboxes() {} checkCheckboxesという名前の関数を定義する。この関数は、チェックボックスの状態をチェックするために使用される。
document.getElementById() 指定されたIDを持つHTML要素を取得する。この場合、各チェックボックスと状態を表示するdiv要素を取得している。
var checkedBoxes = [] チェックされたチェックボックスのIDを格納するための空の配列を宣言。
if (checkBox1.checked) { ... } 各チェックボックスがチェックされているかどうかを判定。チェックされている場合は、そのチェックボックスの名前をcheckedBoxes配列に追加。
statusDiv.textContent div要素のテキスト内容を設定。チェックされた項目のリストを表示するか、何もチェックされていない場合は「なし」と表示する。

チェックボックスの使用例

オンラインショッピングの商品選択

ユーザーが複数の商品を選択してカートに追加する際に、各商品の横にチェックボックスを配置する。ユーザーは好きな商品を選んで、一度にカートに追加することができる。

アンケートやオンライン調査

複数の選択肢から複数回答を選ぶ質問で、回答者がいくつかのオプションを選択できるようにする。例えば、「あなたが好きな趣味を全て選んでください」という質問で、スポーツ、読書、映画鑑賞など複数の趣味から選べるようにできる。

フォームの同意確認

ユーザー登録やオンラインでの申し込みフォームにおいて、利用規約やプライバシーポリシーへの同意を確認するためにチェックボックスを使用。このチェックは、次へ進むための必須条件となることが多い。

メール配信の設定

ユーザーがメールで受け取りたい情報を選択する際に、ニュースレター、プロモーション、イベントのお知らせなど、複数のメールカテゴリーの中から選べるようにチェックボックスを提供。

データフィルタリングと検索

オンラインのデータベースや製品カタログで、ユーザーが特定の条件に基づいてデータをフィルタリングしたり、製品を検索したりする際に使用。例えば、不動産サイトで「バルコニーあり」「ペット可」「駐車場付き」などの条件を選択できる。