チェックボックスがオン/オフのときにイベントがクライアント側を起動するようにしたい:
$('.checkbox').click(function() {
if ($(this).is(':checked')) {
// Do stuff
}
});
基本的には、ページのすべてのチェックボックスで発生するようにします。クリックで発砲して状態をチェックするこの方法は大丈夫ですか?
よりクリーンなjQueryの方法が必要だと思います。誰かが解決策を知っていますか?
チェックボックスがオン/オフのときにイベントがクライアント側を起動するようにしたい:
$('.checkbox').click(function() {
if ($(this).is(':checked')) {
// Do stuff
}
});
基本的には、ページのすべてのチェックボックスで発生するようにします。クリックで発砲して状態をチェックするこの方法は大丈夫ですか?
よりクリーンなjQueryの方法が必要だと思います。誰かが解決策を知っていますか?
回答:
のchange
代わりにイベントにバインドしclick
ます。ただし、チェックボックスがオンになっているかどうかを引き続き確認する必要があります。
$(".checkbox").change(function() {
if(this.checked) {
//Do stuff
}
});
コメントで編集されましたchange
イベントよりもclick
イベントにバインドすることの主な利点は、チェックボックスのすべてのクリックによって状態が変化するわけではないことです。チェックボックスの状態を変化させるイベントのみをキャプチャする場合は、適切な名前のchange
イベントが必要です。
またthis.checked
、要素をjQueryオブジェクトにラップしてjQueryメソッドを使用する代わりに使用したことにも注意してください。これは、DOM要素のプロパティに直接アクセスする方が短くて速いためです。
編集(コメントを参照)
すべてのチェックボックスを取得するには、いくつかのオプションがあります。あなたは使うことができます:checkbox
疑似セレクターを。
$(":checkbox")
または、属性の等しいセレクターを使用することもできます。
$("input[type='checkbox']")
click
、change
(チェックボックスの数によっては)パフォーマンスの問題が発生する可能性があります。親要素またはドキュメントにバインドして、バブルイベントをキャプチャしてみてください。すなわち$('form').on('change', ':checkbox', function(){ //stuff });
ここで問題が発生している人を参照するために、チェックボックスを動的に追加する場合、上記の正しい受け入れられた回答は機能しません。親ノードが特定の子孫からのバブルイベントをキャプチャしてコールバックを発行できるようにするイベント委任を利用する必要があります。
// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
if(this.checked) {
// checkbox is checked
}
});
document
親セレクターを使用する必要はほとんどありません。代わりに、より具体的な親ノードを選択して、イベントが多すぎるレベルに伝播しないようにしてください。
以下の例は、動的に追加されたdomノードのイベントが、以前に定義されたリスナーをトリガーしない方法を示しています。
$postList = $('#post-list');
$postList.find('h1').on('click', onH1Clicked);
function onH1Clicked() {
alert($(this).text());
}
// simulate added content
var title = 2;
function generateRandomArticle(title) {
$postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}
setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
<article class="post">
<h1>Title 1</h1>
</article>
<article class="post">
<h1>Title 2</h1>
</article>
</section>
この例では、特定のノード(h1
この場合)のイベントをキャプチャして、そのようなイベントのコールバックを発行するためのイベント委任の使用法を示しています。
$postList = $('#post-list');
$postList.on('click', 'h1', onH1Clicked);
function onH1Clicked() {
alert($(this).text());
}
// simulate added content
var title = 2;
function generateRandomArticle(title) {
$postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}
setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
<article class="post">
<h1>Title 1</h1>
</article>
<article class="post">
<h1>Title 2</h1>
</article>
</section>
ちょうど別の解決策
$('.checkbox_class').on('change', function(){ // on change of state
if(this.checked) // if changed state is "CHECKED"
{
// do the magic here
}
})
チェックされたチェックボックスにのみイベントをアタッチするつもりである場合(チェックを外して後でもう一度チェックすると起動します)、これが必要です。
$(function() {
$("input[type='checkbox']:checked").change(function() {
})
})
すべてのチェックボックス(チェック済みおよびチェックなし)にイベントを添付するつもりである場合
$(function() {
$("input[type='checkbox']").change(function() {
})
})
それらがチェックされているとき(チェックされていないとき)にのみ起動する場合は、上記の@James Allardiceが答えます。
ところでinput[type='checkbox']:checked
、CSSセレクターです。
$("input[type='checkbox']:not(:checked)")
イベントに基づいて実行されるアクション(クリックイベント)。
$('#my_checkbox').on('click',function(){
$('#my_div').hide();
if(this.checked){
$('#my_div').show();
}
});
イベントなしで、現在の状態に基づいてアクションを実行します。
$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
$('#my_div').show();
}
このjQuery検証を試す
$(document).ready(function() {
$('#myform').validate({ // initialize the plugin
rules: {
agree: {
required: true
}
},
submitHandler: function(form) {
alert('valid form submitted');
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<form id="myform" action="" method="post">
<div class="buttons">
<div class="pull-right">
<input type="checkbox" name="agree" /><br/>
<label>I have read and agree to the <a href="https://stackexchange.com/legal/terms-of-service">Terms of services</a> </label>
</div>
</div>
<button type="submit">Agree</button>
</form>
非常に簡単です、これは私が使う方法です:
jQuery:
$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
var checkbox = $(this), // Selected or current checkbox
value = checkbox.val(); // Value of checkbox
if (checkbox.is(':checked'))
{
console.log('checked');
}else
{
console.log('not checked');
}
});
よろしく!