kotak centang jQuery memeriksa kondisi yang diubah

Saya ingin acara memecat sisi klien ketika kotak centang dicentang / tidak dicentang:

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

Pada dasarnya saya ingin itu terjadi untuk setiap kotak centang di halaman. Apakah metode ini menembakkan klik dan memeriksa keadaan ok?

Saya pikir pasti ada cara jQuery yang lebih bersih. Adakah yang tahu solusinya?

Bind ke changeacara, bukan click. Namun, Anda mungkin masih perlu memeriksa apakah kotak centang dicentang:

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

Manfaat utama dari pengikatan changeacara clicktersebut adalah tidak semua klik pada kotak centang akan menyebabkannya berubah. Jika Anda hanya ingin menangkap peristiwa yang menyebabkan kotak centang berubah status, Anda ingin acara yang diberi nama tepat change. Redacted dalam komentar

Perhatikan juga bahwa saya telah menggunakan this.checkedalih-alih membungkus elemen dalam objek jQuery dan menggunakan metode jQuery, hanya karena lebih pendek dan lebih cepat untuk mengakses properti elemen DOM secara langsung.

Edit (lihat komentar)

Untuk mendapatkan semua kotak centang, Anda memiliki beberapa opsi. Anda dapat menggunakan:checkbox pemilih-semu:

$(":checkbox")

Atau Anda dapat menggunakan atribut sama dengan pemilih:

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

Untuk referensi di masa mendatang kepada siapa pun di sini yang mengalami kesulitan, jika Anda menambahkan kotak centang secara dinamis, jawaban yang diterima yang benar di atas tidak akan berfungsi. Anda harus memanfaatkan delegasi acara yang memungkinkan simpul induk untuk menangkap peristiwa yang menggelegak dari keturunan tertentu dan mengeluarkan panggilan balik.

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

Perhatikan bahwa hampir selalu tidak perlu digunakan document untuk pemilih induk. Alih-alih memilih node induk yang lebih spesifik untuk mencegah penyebaran acara ke level terlalu banyak.

Contoh di bawah ini menampilkan bagaimana peristiwa node dom yang ditambahkan secara dinamis tidak memicu pendengar yang ditentukan sebelumnya.

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

Sementara contoh ini menampilkan penggunaan delegasi acara untuk menangkap peristiwa untuk simpul tertentu ( h1dalam kasus ini), dan mengeluarkan panggilan balik untuk acara tersebut.

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

Hanya solusi lain

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

Jika maksud Anda adalah untuk melampirkan acara hanya pada kotak centang yang dicentang (jadi itu akan menyala ketika mereka tidak dicentang dan diperiksa lagi nanti) maka inilah yang Anda inginkan.

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

    })
})

jika niat Anda adalah untuk melampirkan acara ke semua kotak centang (dicentang dan tidak dicentang)

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

    })
})

jika Anda ingin menjalankannya hanya ketika mereka diperiksa (dari tidak dicentang) maka @James Allardice menjawab di atas.

BTW input[type='checkbox']:checkedadalah pemilih CSS.

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

Pengambilan tindakan berdasarkan suatu peristiwa (pada acara klik).

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

Tanpa kejadian mengambil tindakan berdasarkan kondisi saat ini.

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

mungkin ini bisa menjadi alternatif untuk Anda.

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

Ini adalah solusi untuk menemukan apakah kotak centang dicentang atau tidak. Gunakan fungsi #prop () //

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

Coba validasi jQuery ini

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

Sangat sederhana, ini cara saya menggunakan:

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

Salam!