JavaScript でチェックボックスがオンになっているときにテキストを表示する
-
チェックボックスがチェックされているときにテキストを表示するには、JavaScript の
.checkedプロパティを使用する -
チェックボックスがチェックされているときにテキストを表示するには、jQuery
is()関数と JavaScript.checkedプロパティを使用する -
jQuery の
readyとclickイベントを使って、チェックボックスがチェックされたときにテキストを表示する
この記事では、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';
}
}
出力：
上記のコードは、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')
}
}
出力：
チェックボックスがチェックされているときにテキストを表示するには、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');
}
}
出力：
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 の ready と click イベントを使って、チェックボックスがチェックされたときにテキストを表示する
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....');
});
});
出力：
ready と click は JavaScript で使用される jQuery イベントです。
ready イベントは、ドキュメントオブジェクトモデル（DOM）がロードされたときに発生します。ready こちらの詳細をご覧いただけます。
click は、選択した要素にクリックイベントを割り当てるために使用されます。この例では、これは input タグです。詳細については、こちらをご覧ください。
これらのイベントは、チェックボックスをオンにする場合にのみ使用できることを忘れないでください。その理由は、checked プロパティをチェックするのではなく、click イベントを検出するためです。
上記の出力では、常にチェック済みと表示されていることがわかります。チェックを外してもかまいませんが、クリックしたかどうかを検出するだけです。
click イベントに気づきます。これは、チェックボックスがオンになっているだけかどうかを知るのに役立ちます。チェックボックスがオフになっているかどうかも知りたい場合は、良い選択ではありません。
