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

JavaScriptでチェックボックスのオン・オフ状態を確認する方法

JavaScriptでチェックボックスがオン（チェック済み）になっているかどうかを確認するには、チェックボックス要素が持つ checked プロパティを使用します。このプロパティは、チェックボックスがオンのときは true、オフのときは false を返します。

確認の基本手順

まず document.getElementById() などのメソッドでチェックボックスの要素を取得し、その checked プロパティを参照します。これだけで、現在のチェック状態を真偽値として簡単に取得できます。

サンプルコード

以下のコードは、ボタンをクリックしたときにチェックボックスの状態を判定してアラートで表示するシンプルな例です。チェックされていれば true、されていなければ false が表示されます。

<html>
   <head>
      <script>
         function myFunction(){
            var result = document.getElementById("check").checked;
            alert(result);
         }
      </script>
   </head>
   <body>
      <label><input id="check" type="checkbox">One</label><br>
      <button onclick="myFunction()">Check value</button>
   </body>
</html>

コードのポイント

  • 要素の取得： document.getElementById("check") でIDが「check」のチェックボックスを取得します。
  • 状態の取得： .checked プロパティにより、チェック状態がブール値（true / false）として返されます。
  • 結果の表示： 取得した値を alert() で画面に表示しています。

querySelectorを使った書き方

近年では、より柔軟な要素指定ができる querySelector() を使う書き方も一般的です。以下のように記述しても同じ結果が得られます。

var result = document.querySelector("#check").checked;

フォームのバリデーションや条件分岐の処理などでも頻繁に使われる基本テクニックなので、ぜひ覚えておきましょう。

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

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

  2. React Nativeでチェックボックスを表示する方法【実装サンプル付き】

    React Nativeでチェックボックスを表示する方法チェックボックスは、UIで頻繁に使われる基本的なコンポーネントの一つです。React Nativeでは、便利なライブラリを活用することで、チェックボックスを簡単かつ美しく表示できます。ただし、react-nativeのコアパッケージにはチェックボックス機能が含まれていないため、別途パッケージをインストールする必要があります。必要なパッケージのインストールチェックボックスを表示するには、以下のコマンドで「react-native-paper」をインストールします。npm install --save-dev react-native-pap