チェックボックスの変更にバインドし、JavaScript/jQueryでイベントをクリックします
この投稿では、JavaScriptとjQueryでHTMLチェックボックスの変更とクリックイベントにバインドする方法について説明します。
JavaScriptとjQueryを使用してHTMLチェックボックスの変更またはクリックイベントにバインドする方法はいくつかあります。
1.jQueryの使用
jQueryを使用すると、 .is() メソッド。jQueryオブジェクトの内容をセレクターと照合します。次のコードは、これを :checked CSS疑似クラスセレクター。
JS
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function() { $('input[type=checkbox][name=gender]').change(function() { if ($(this).is(':checked')) { alert(`${this.value} is checked`); } else { alert(`${this.value} is unchecked`); } }); }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html> <body> <p>Gender:</p> <div> <input type="checkbox" id="male" name="gender" value="male"> <label for="male">Male</label> </div> <div> <input type="checkbox" id="female" name="gender" value="female"> <label for="female">Female</label> </div> <br> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 |
p, label { font: 15px 'Exo 2', sans-serif; } input { margin: 6px; } |
または、jQueryを使用することもできます .prop() メソッド。入力チェックボックスがチェックされている場合はtrueを返し、それ以外の場合はfalseを返します。
JS
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function() { $('input[type=checkbox][name=gender]').change(function() { if ($(this).prop("checked")) { alert(`${this.value} is checked`); } else { alert(`${this.value} is unchecked`); } }); }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html> <body> <p>Gender:</p> <div> <input type="checkbox" id="male" name="gender" value="male"> <label for="male">Male</label> </div> <div> <input type="checkbox" id="female" name="gender" value="female"> <label for="female">Female</label> </div> <br> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 |
p, label { font: 15px 'Exo 2', sans-serif; } input { margin: 6px; } |
jQueryを使用する代わりに is() また prop() メソッド、あなたは直接アクセスすることができます .checked チェックボックスがチェックされているかどうかを判断するためのDOM要素のプロパティ。
JS
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function() { $('input[type=checkbox][name=gender]').change(function() { if (this.checked) { alert(`${this.value} is checked`); } else { alert(`${this.value} is unchecked`); } }); }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html> <body> <p>Gender:</p> <div> <input type="checkbox" id="male" name="gender" value="male"> <label for="male">Male</label> </div> <div> <input type="checkbox" id="female" name="gender" value="female"> <label for="female">Female</label> </div> <br> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 |
p, label { font: 15px 'Exo 2', sans-serif; } input { margin: 6px; } |
上記のすべての例では、attributeEqualsセレクターを使用していることに注意してください $('input[type=checkbox][name=gender]') すべてのチェックボックスを検索します。また、使用することができます :checkbox pseudo-selector $(':checkbox').
変更イベントの代わりに、チェックボックスのクリックイベントにバインドすることもできることに注意してください。
2.JavaScriptを使用する
純粋なJavaScriptを使用すると、 EventTarget.addEventListener() チェックボックスのクリックまたは変更イベントにバインドするメソッド。
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
document.addEventListener('DOMContentLoaded', function() { var checkboxes = document.querySelectorAll('input[type=checkbox][name=gender]'); for (var checkbox of checkboxes) { checkbox.addEventListener('change', function(event) { if (event.target.checked) { alert(`${event.target.value} is checked`); } else { alert(`${event.target.value} is unchecked`); } }); } }, false); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html> <body> <p>Gender:</p> <div> <input type="checkbox" id="male" name="gender" value="male"> <label for="male">Male</label> </div> <div> <input type="checkbox" id="female" name="gender" value="female"> <label for="female">Female</label> </div> <br> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 |
p, label { font: 15px 'Exo 2', sans-serif; } input { margin: 6px; } |
これで、JavaScriptとjQueryのチェックボックスの変更とクリックイベントにバインドすることができます。