JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでチェックボックスが選択されているかどうかを判定する方法

JavaScriptでチェックボックスがチェックされているかどうかを確認するには、チェックボックス要素の checked プロパティを使用します。このプロパティは、チェックボックスが選択されている場合に true を、未選択の場合に false を返します。

以下の例では、チェックボックスの状態に応じてテキストの表示・非表示を切り替える実装を紹介します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<h1>Displaying textBox when a checkbox is checked</h1>
Checkbox: <input type="checkbox" class="check" onclick="checkFunction()" />
<h2 class="textBox" style="display:none">Checkbox is checked!!!</h2>
<script>
    document.querySelector(".check").addEventListener("click", checkFunction);
    function checkFunction() {
        var checkBox = document.querySelector(".check");
        var textBox = document.querySelector(".textBox");
        if (checkBox.checked == true) {
            textBox.style.display = "block";
        } else {
            textBox.style.display = "none";
        }
    }
</script>
</body>
</html>

コードの解説

  • addEventListener を使用して、チェックボックスがクリックされたときに checkFunction() 関数が呼び出されるように設定しています。
  • document.querySelector() でチェックボックスとテキスト要素をそれぞれ取得します。
  • checkBox.checked == true の条件式でチェック状態を判定し、チェックされていればテキストを display: block で表示し、チェックが外れた場合は display: none で非表示にします。

出力結果

このコードを実行すると、次のような画面が表示されます。

JavaScriptでチェックボックスが選択されているかどうかを判定する方法

チェックボックスをクリックすると、以下のようにメッセージが表示されます。

JavaScriptでチェックボックスが選択されているかどうかを判定する方法

まとめ

チェックボックスの選択状態を取得するには、checked プロパティを参照するのが最もシンプルな方法です。フォームのバリデーションや条件付き表示など、さまざまな場面で活用できる基本的なテクニックなので、ぜひ覚えておきましょう。

  1. JavaScriptでボタンがクリックされたかどうかを判定する方法

    JavaScriptを使えば、ボタンがクリックされたかどうかを簡単に判定できます。最も一般的な方法は、addEventListener()メソッドでクリックイベントを監視することです。以下に、ボタンのクリックを検出し、クリックされた回数を画面に表示するサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1

  2. jQueryでチェックボックスのオン・オフ状態を判定する方法

    jQueryでチェックボックスがチェックされているかどうかを確認するには、toggle()メソッドを活用するのが便利です。チェックボックスのクリックイベントと組み合わせることで、チェック状態に応じて要素の表示・非表示を簡単に切り替えられます。以下に、具体的なサンプルコードを示します。サンプルコード<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&