jQuery onay kutusu işaretli durum değişti olay

Bir onay kutusu işaretli / işaretli olmadığında bir olayı istemci tarafında tetiklemek istiyorum:

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

Temel olarak, sayfadaki her onay kutusu için olmasını istiyorum. Bu tıklamaya ateş etme ve durumu kontrol etme yöntemi iyi mi?

Daha temiz bir jQuery yolu olması gerektiğini düşünüyorum. Bir çözüm bilen var mı?

changeBunun yerine etkinliğe bağlanın click. Ancak, yine de onay kutusunun işaretli olup olmadığını kontrol etmeniz gerekecektir:

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

changeOlaya olay üzerinden bağlanmanın ana yararı click, bir onay kutusuna yapılan tüm tıklamaların durumun değişmesine neden olmamasıdır. Yalnızca onay kutusunun durumunu değiştirmesine neden olan olayları yakalamak istiyorsanız, uygun şekilde adlandırılmış changeolayı istersiniz . Yorumlarda düzeltildi

Ayrıca this.checked, öğeyi bir jQuery nesnesine sarmak ve jQuery yöntemlerini kullanmak yerine kullandığımı, çünkü doğrudan DOM öğesinin özelliğine doğrudan erişmenin daha kısa ve daha hızlı olduğunu unutmayın.

Düzenle (yorumlara bakın)

Tüm onay kutularını almak için birkaç seçeneğiniz vardır. :checkboxYalancı seçiciyi kullanabilirsiniz :

$(":checkbox")

Veya şuna eşit bir özellik kullanabilirsiniz :

$("input[type='checkbox']")

Gelecekte zorluk çeken herkese başvurmak için, onay kutularını dinamik olarak ekliyorsanız, yukarıdaki kabul edilen doğru cevap çalışmaz. Bir üst düğümün belirli bir torundan gelen kabarmış olayları yakalamasına ve bir geri arama yapmasına izin veren olay temsilcisinden yararlanmanız gerekir .

// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
    if(this.checked) {
      // checkbox is checked
    }
});

documentÜst seçici için neredeyse her zaman gereksizdir . Bunun yerine, etkinliğin çok fazla düzeyde yayılmasını önlemek için daha spesifik bir üst düğüm seçin.

Aşağıdaki örnek, dinamik olarak eklenen dom düğümlerinin olaylarının önceden tanımlanmış dinleyicileri nasıl tetiklemediğini gösterir.

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

Bu örnekte, belirli bir düğüm için ( h1bu durumda) olayları yakalamak ve bu tür olaylar için geri arama yapmak üzere olay yetkisi kullanımı görüntülenir .

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

Başka bir çözüm

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

Amacınız yalnızca işaretli onay kutularına etkinlik eklemekse (bu yüzden işaretlenmediklerinde ve daha sonra tekrar kontrol edildiklerinde tetiklenirler) o zaman istediğiniz şey budur.

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

    })
})

niyetiniz tüm onay kutularına etkinlik (işaretli ve işaretsiz) eklemekse

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

    })
})

Eğer sadece işaretlenirken (işaretlenmemişken) ateş etmesini istiyorsanız, yukarıdaki @James Allardice cevabı.

BTW input[type='checkbox']:checked, CSS seçicidir.

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

Bir etkinliğe dayalı eylem gerçekleştirme (tıklama etkinliğinde).

$('#my_checkbox').on('click',function(){
   $('#my_div').hide();
   if(this.checked){
     $('#my_div').show();
   }
});

Mevcut duruma göre işlem yapmadan.

$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
  $('#my_div').show();
}

belki bu sizin için bir alternatif olabilir.

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

Bu, onay kutusunun işaretli olup olmadığıdır. #Prop () işlevini kullanın //

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

Bu jQuery doğrulamasını deneyin

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

Çok basit, bu şekilde kullanıyorum:

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');
    }
});

Saygılarımızla!