jQuery でチェックボックスのオンとオフを切り替える
-
.prop()メソッドを使用してチェックボックスを切り替えます -
.each()メソッドを使用してチェックボックスを切り替えます -
.trigger()メソッドを使用してチェックボックスを切り替えます
この記事では、jQuery を使用して複数のチェックボックスを一度に切り替える 3つの方法について説明します。 3つのメソッドは、jQuery で使用可能な 3つのメソッドを使用します。 これらは、.prop()、.each()、および .trigger() です。
.prop() メソッドを使用してチェックボックスを切り替えます
jQuery では、.prop() メソッドを使用して HTML 要素のプロパティを設定できます。 ここでは、コード内のチェックボックスでそれを使用して、チェック済みと未チェックの間で状態を切り替えることができます。
次の例は、その方法を示しています。 その中に、HTML と jQuery コードがあります。 HTML にはチェックボックスが含まれており、最初のチェックボックスをクリックするとすべてがチェックされます。
jQuery コードの最初のチェックボックスに click イベントを追加しました。 その後、残りのチェックボックスの checked プロパティを操作します。
最初のチェックボックスを初めてオンにすると、すべてのチェックボックスがオンになります。 チェックを外すと、残りのチェックボックスはデフォルトの状態に戻ります。 未チェック.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-toggle-checkboxes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
form {
outline: 2px solid #1a1a1a;
width: 50%;
margin: 0 auto;
padding: 0.5em;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
label:first-child:hover {
background-color: #aaa;
}
</style>
</head>
<body>
<main>
<form id="form">
<label>
<input type="checkbox" id="select-lang"> Select all languages
</label>
<label>
<input type="checkbox" class="tech"> Cascading Style Sheets
</label>
<label>
<input type="checkbox" class="tech"> Hypertext Markup Language
</label>
</form>
</main>
<script>
$(document).ready(function() {
$("#select-lang").click(function() {
let check_boxes = $("input.tech");
// Swap the "prop" attribute each time the
// user clicks the "select-lang" checkbox.
check_boxes.prop("checked", !check_boxes.prop("checked"));
});
});
</script>
</body>
</html>
出力：
.each() メソッドを使用してチェックボックスを切り替えます
チェックボックスを切り替える .each() メソッドは、.prop() で示したものと同じように機能します。 しかし、違いがあります。 関数を使用して、各チェックボックスを反復処理します。
この繰り返しの間に、チェックボックスの状態を checked から unchecked に変更しました。 次のコードは、その方法を示しています。
また、最初の例の HTML を更新しました。 今回は、チェックボックスに国の名前が含まれています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-toggle-checkboxes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
form {
outline: 2px solid #1a1a1a;
width: 50%;
margin: 0 auto;
padding: 0.5em;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
label:first-child:hover {
background-color: #aaa;
}
</style>
</head>
<body>
<main>
<form id="form">
<label>
<input type="checkbox" id="select-country"> Select all countries
</label>
<label>
<input type="checkbox" class="country"> Georgia
</label>
<label>
<input type="checkbox" class="country"> Turkmenistan
</label>
<label>
<input type="checkbox" class="country"> Azerbaijan
</label>
</form>
</main>
<script>
$(document).ready(function() {
$("#select-country").click(function() {
// Use the ".each()" API to iterate over the
// countries and alternate them between "checked"
// and "unchecked".
$('input.country').each(function () {
this.checked = !this.checked;
});
});
});
</script>
</body>
</html>
出力：
.trigger() メソッドを使用してチェックボックスを切り替えます
.trigger() メソッドを使用してチェックボックスを切り替える方法は、.prop() および .each() を使用する方法とは異なります。 今回は、.trigger() メソッドを使用して、最初のチェックボックスをクリックすると、すべてのチェックボックスでクリック関数を実行します。
もう 1つの方法は、各チェックボックスで .click() メソッドを呼び出すことです。 どちらも正常に動作します。
しかし、それはコード内にコメントとして残しておいたので、後で試すことができます。 HTML は同じままですが、チェックボックスにはインターネット上のトップ Web サイトの名前が含まれるようになりました。
これらはすべて、以下のコード ブロックで確認でき、ブラウザーでの出力は次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>03-toggle-checkboxes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
form {
outline: 2px solid #1a1a1a;
width: 50%;
margin: 0 auto;
padding: 0.5em;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
label:first-child:hover {
background-color: #aaa;
}
</style>
</head>
<body>
<main>
<form id="form">
<label>
<input type="checkbox" id="select-websites"> Select all websites
</label>
<label>
<input type="checkbox" class="website"> Facebook
</label>
<label>
<input type="checkbox" class="website"> Amazon
</label>
<label>
<input type="checkbox" class="website"> Apple
</label>
<label>
<input type="checkbox" class="website"> Netflix
</label>
<label>
<input type="checkbox" class="website"> Google
</label>
</form>
</main>
<script>
$(document).ready(function() {
$("#select-websites").click(function() {
// Use the ".trigger()"" API to execute the
// click function on each checkbox
$('input.website').trigger('click');
// Another option is to execute the "click"
// API directly on the checkboxes
// $('input.website').click();
});
});
</script>
</body>
</html>
出力：
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn