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

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

jQueryでチェックボックスがチェックされているかどうかを確認するには、toggle()メソッドを活用するのが便利です。チェックボックスのクリックイベントと組み合わせることで、チェック状態に応じて要素の表示・非表示を簡単に切り替えられます。

以下に、具体的なサンプルコードを示します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<input type="checkbox" id="selectName"/>
<div id="txtName" style="display:none">あなたの名前はAdam Smithです</div>
<script>
   $('#selectName').click(function() {
      $("#txtName").toggle(this.checked);
   });
</script>
</body>
</html>

実行方法

上記のプログラムを実行するには、ファイル名を「anyName.html」（または「index.html」）として保存します。その後、VS Codeエディタ上でファイルを右クリックし、「Open with Live Server」を選択してブラウザで開いてください。

実行結果

プログラムを実行すると、最初は次のように表示されます。チェックボックスは未選択の状態で、テキストは非表示になっています。

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

チェックボックスを選択した場合

チェックボックスにチェックを入れると、toggle(this.checked)によってテキストが表示され、次のような出力になります。

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

解説

このコードのポイントは、クリックイベントハンドラ内で this.checked を参照している点です。this.checked はブール値（true / false）を返すため、それをそのまま toggle() の引数に渡すことで、チェックされていれば要素を表示、解除されていれば非表示にできます。

なお、チェック状態の判定には他にも以下のような方法があります。

  • $('#selectName').prop('checked') — 現在のチェック状態を取得（推奨）
  • $('#selectName').is(':checked') — セレクタで判定する書き方

用途に応じて使い分けることで、より柔軟な実装が可能になります。

  1. HTMLフォームでチェックボックスを使用する方法をわかりやすく解説

    HTMLフォームを使えば、ユーザーからの入力を簡単に受け取ることができます。<form>タグの中に各種フォーム要素を配置することで、テキスト入力、ラジオボタン、送信ボタンなど、さまざまな形式の入力欄を作成できます。 チェックボックスとは チェックボックスは、複数の選択肢から複数の項目を選ばせたい場合に使用するフォーム要素です。ラジオボタンが「1つだけ選択」であるのに対し、チェックボックスは「該当するものすべてにチェックを入れられる」点が特徴です。 チェックボックスも他の入力要素と同様に<input>タグで作成しますが、type属性の値として「checkbox」を指定しま

  2. HTML DOM 入力チェックボックスの checked プロパティの使い方を解説

    HTML DOM の checked プロパティは、HTML 内のチェックボックス（input type=checkbox）における checked 属性の値を取得したり、変更したりするために使用されます。このプロパティを使うことで、JavaScript から動的にチェックボックスのオン・オフ状態を制御できます。構文checked プロパティの基本的な構文は以下のとおりです。1. checked の値を取得する場合object.checked2. checked の値を設定（変更）する場合object.checked = true|falseサンプルコードここでは、HTML DOM Input