web-dev-qa-db-ja.com

jQueryのチェックボックスチェック状態の変更イベント

チェックボックスがチェックされている/チェックされていないときにクライアント側にイベントを発生させたいです

$('.checkbox').click(function() {
  if ($(this).is(':checked')) {
    // Do stuff
  }
});

基本的に私はそれがページ上のすべてのチェックボックスに対して起こることを望みます。クリックで発砲して状態をチェックするこの方法は大丈夫ですか？

私はもっ​​ときれいなjQueryの方法がなければならないと思っています。誰もが解決策を知っていますか？

javascriptjqueryevent-handling
541
AnonyMouse

changeではなくclickイベントにバインドします。しかし、チェックボックスがチェックされているかどうかをチェックする必要があるでしょう。

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

changeイベントよりもclickイベントにバインドすることの主な利点は、チェックボックスをすべてクリックしても状態が変わるわけではないことです。チェックボックスの状態を変化させるイベントのみをキャプチャしたい場合は、適切な名前のchangeイベントが必要です。 コメントに編集

また、要素をjQueryオブジェクトにラップしてjQueryメソッドを使用する代わりにthis.checkedを使用したことにも注意してください。単純にDOM要素のプロパティに直接アクセスするほうが短くて速いからです。

編集 （コメントを参照）

すべてのチェックボックスを取得するには、いくつかの選択肢があります。 :checkbox 疑似セレクタを使用できます。

$(":checkbox")

あるいは、 attribute equals selectorを使用することもできます。

$("input[type='checkbox']")
1083
James Allardice

チェックボックスを動的に追加している場合、ここで問題を抱えている誰かに将来参照するために、上の正しい答えは働かないでしょう。 イベントの委任 を利用する必要があります。これにより、親ノードは特定の子孫からバブルイベントをキャプチャしてコールバックを発行できます。

// $(<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>

91
applecrusher

もう一つの解決策 

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})
21
Siddhartha Chowdhury

あなたの意図がチェックされたチェックボックスにのみイベントを添付することであるなら（チェックが外されて後でまたチェックされるときに発生します）、これはあなたが望むものです。

$(function() {
    $("input[type='checkbox']:checked").change(function() {

    })
})

あなたの意図がすべてのチェックボックスにイベントを添付することである場合（チェックあり、チェックなし）

$(function() {
    $("input[type='checkbox']").change(function() {

    })
})

チェックされているとき（チェックされていない状態から）にのみ起動させたい場合は、上記の@James Allardiceの回答を使用してください。 

ところでinput[type='checkbox']:checkedはCSSセレクターです。

12
Matas Vaitkevicius
$(document).ready(function () {
    $(document).on('change', 'input[Id="chkproperty"]', function (e) {
        alert($(this).val());
    });
});
4
Burhan Kaya

この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>

1
Nishanth ॐ

おそらくこれはあなたにとって代わるかもしれません。

<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`
1
caras

イベントに基づいた行動（クリックイベント）。

$('#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();
}
0
Hasib Kamal

これは、チェックボックスがチェックされているかどうかを確認するための解決策です。 #prop（）関数を使用してください//

$("#c_checkbox").on('change', function () {
                    if ($(this).prop('checked')) {
                        // do stuff//
                    }
                });
0
Shan