JavaScript でチェックボックスがオンになっているときにテキストを表示する

Mehvish Ashiq 2023年10月12日
  1. チェックボックスがチェックされているときにテキストを表示するには、JavaScript の .checked プロパティを使用する
  2. チェックボックスがチェックされているときにテキストを表示するには、jQuery is() 関数と JavaScript.checked プロパティを使用する
  3. jQuery の readyclick イベントを使って、チェックボックスがチェックされたときにテキストを表示する
JavaScript でチェックボックスがオンになっているときにテキストを表示する

この記事では、JavaScript でチェックボックスがオンになっているときにテキストを表示するさまざまな手法を紹介します。また、JavaScript と jQuery の関数とイベントについても学習します。

チェックボックスがチェックされているときにテキストを表示するには、JavaScript の .checked プロパティを使用する

HTML コード:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Checkbox</title>
  </head>
  <body>
    <p>Let see how to know if check box is checked:</p>
    <label for="check">Checkbox:</label>
    <input type="checkbox" id="check" onclick="checkfunction()">
    <p id="message" style="display:none">Checkbox is Checked Now!</p>
  </body>
</html>

JavaScript コード:

function checkfunction() {
  var check = document.getElementById('check');
  var message = document.getElementById('message');
  if (check.checked == true) {
    message.style.display = 'block';
  } else {
    message.style.display = 'none';
  }
}

出力:

javascript でチェックボックスがオンになっているときにテキストを表示する-チェックボックスがオンになっているプロパティ出力パート 1

上記のコードは、ID の値、check および message をターゲットにして要素を取得します。次に、check.checked の値が true または false であるかどうかをチェックします。

true の場合、message 変数に保存されているメッセージを表示します。ただし、.checkedブールプロパティであり、true または false のいずれかになります。

このプロパティを純粋な JavaScript 内で使用し、jQuery 関数と組み合わせることができます。詳しくはこちらをご参照ください。

チェックボックスがオンになっているかどうかを示すメッセージをウィンドウに表示するのではなく、アラート機能を使用してブラウザにポップアップメッセージを表示できます。JavaScript コードを次のように置き換えて練習することができます。

JavaScript コード:

function checkfunction() {
  if ((document.getElementById('check')).checked) {
    alert('The checkbox is checked');
  } else {
    alert('The checkbox is not checked')
  }
}

出力:

javascript でチェックボックスがオンになっているときにテキストを表示する-チェックボックスがオンになっているプロパティ出力パート 2

チェックボックスがチェックされているときにテキストを表示するには、jQuery is() 関数と JavaScript.checked プロパティを使用する

HTML コード:

<!DOCTYPE html>
<html>
  <head>
     <title>JavaScript Checkbox Practice</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <input type="checkbox" id="check"> Check it and Submit
    <button onclick="checked()"> Submit </button>
  </body>
</html>

JavaScript コード:

function checked() {
  if ($('#check').is(':checked')) {
    alert('Checked');
  } else {
    alert('Not Checked');
  }
}

出力:

javascript でチェックボックスがオンになっているときにテキストを表示する-チェックボックスがオンになっているプロパティ出力パート 3

checked() メソッドは、Submit というタイトルのボタンをクリックすると、上記のコードで実行されます。このメソッドは、id 属性の値が check である最初の要素を取得します。

さらに、要素の checked プロパティが true または false であるかどうかをチェックします。どのように?ここで、is() 関数は、選択された要素がセレクター要素と一致するかどうかをチェックします。

is() 関数は、現在の要素を他の要素と一緒にチェックします。セレクターまたは jQuery オブジェクトにすることができます。

is() メソッドは 2つのパラメーターを取ります。1つは必須で、もう 1つはオプションです(selectorElement は必須で、function(index, element) はオプションです)。この関数は、条件が false を満たしている場合に true を返します。

ここでは、$document.getElementById のように機能していることに注意してください。チェックボックスがオンになっている場合、上記のコードは Checked と表示されます。それ以外の場合、Not Checked

jQuery の readyclick イベントを使って、チェックボックスがチェックされたときにテキストを表示する

HTML コード:

<html>
  <head>
    <title>practice ready and click events</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
   <input type="checkbox" id="check"> Check it
  </body>
</html>

JavaScript コード

$(document).ready(function() {
  $('input').click(function() {
    alert('You checed....');
  });
});

出力:

javascript でチェックボックスがオンになっているときにテキストを表示-チェックボックスがオンになっているプロパティ出力パート 4

readyclick は JavaScript で使用される jQuery イベントです。

ready イベントは、ドキュメントオブジェクトモデル(DOM)がロードされたときに発生します。ready こちらの詳細をご覧いただけます。

click は、選択した要素にクリックイベントを割り当てるために使用されます。この例では、これは input タグです。詳細については、こちらをご覧ください。

これらのイベントは、チェックボックスをオンにする場合にのみ使用できることを忘れないでください。その理由は、checked プロパティをチェックするのではなく、click イベントを検出するためです。

上記の出力では、常にチェック済みと表示されていることがわかります。チェックを外してもかまいませんが、クリックしたかどうかを検出するだけです。

click イベントに気づきます。これは、チェックボックスがオンになっているだけかどうかを知るのに役立ちます。チェックボックスがオフになっているかどうかも知りたい場合は、良い選択ではありません。

著者: Mehvish Ashiq
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

関連記事 - JavaScript Checkbox