Pertanyaan Pengaturan "diperiksa" untuk kotak centang dengan jQuery?


Saya ingin melakukan sesuatu seperti ini untuk mencentang a checkbox menggunakan jQuery:

$(".myCheckBox").checked(true);

atau

$(".myCheckBox").selected(true);

Apakah hal semacam itu ada?


3595
2018-01-08 22:20


asal


Jawaban:


jQuery 1.6+

Gunakan yang baru .prop() metode:

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

jQuery 1.5.x dan di bawah

Itu .prop() metode tidak tersedia, jadi Anda perlu menggunakannya .attr().

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Perhatikan bahwa ini pendekatan yang digunakan oleh unit tes jQuery sebelum versi 1.6 dan lebih baik digunakan

$('.myCheckbox').removeAttr('checked');

karena yang terakhir akan, jika kotak awalnya diperiksa, ubah perilaku panggilan ke .reset() pada segala bentuk yang mengandung itu - perubahan perilaku yang halus tetapi mungkin tidak diinginkan.

Untuk konteks lebih lanjut, beberapa diskusi yang tidak lengkap tentang perubahan pada penanganan checked atribut / properti dalam transisi dari 1.5.x ke 1.6 dapat ditemukan di catatan rilis versi 1.6 dan Atribut vs. Properti bagian dari .prop() dokumentasi.

Versi jQuery apa pun

Jika Anda hanya bekerja dengan satu elemen, Anda selalu dapat memodifikasi HTMLInputElement's .checked milik:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

Manfaat menggunakan .prop() dan .attr() metode bukannya ini adalah bahwa mereka akan beroperasi pada semua elemen yang cocok.


5402
2018-01-08 22:25



Menggunakan:

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

Dan jika Anda ingin memeriksa apakah kotak centang dicentang atau tidak:

$('.myCheckbox').is(':checked');

622
2018-01-08 22:25



Ini adalah cara yang benar untuk memeriksa dan menghapus centang pada kotak dengan jQuery, karena ini adalah standar lintas platform, dan akan izinkan formulir reposts.

$('.myCheckBox').each(function(){ this.checked = true; });

$('.myCheckBox').each(function(){ this.checked = false; });

Dengan melakukan ini, Anda menggunakan standar JavaScript untuk memeriksa dan tidak memeriksa kotak centang, sehingga browser apa pun yang dengan benar menerapkan properti "dicentang" dari elemen kotak centang akan menjalankan kode ini dengan sempurna. Ini harus menjadi semua browser utama, tetapi saya tidak dapat menguji sebelumnya ke Internet Explorer 9.

Masalah (jQuery 1.6):

Setelah pengguna mengklik kotak centang, kotak centang itu berhenti merespons perubahan atribut "diperiksa".

Berikut ini contoh atribut kotak centang yang gagal melakukan pekerjaan setelah seseorang diklik kotak centang (ini terjadi di Chrome).

Biola

Solusinya:

Dengan menggunakan properti "checked" JavaScript di DOM elemen, kami dapat memecahkan masalah secara langsung, alih-alih mencoba memanipulasi DOM untuk melakukan apa yang kami lakukan ingin itu harus dilakukan.

Biola

Plugin ini akan mengubah properti yang dicentang dari setiap elemen yang dipilih oleh jQuery, dan berhasil memeriksa dan menghapus centang pada kotak centang dalam semua keadaan. Jadi, sementara ini mungkin tampak seperti solusi over-bearing, itu akan membuat pengalaman pengguna situs Anda lebih baik, dan membantu mencegah frustrasi pengguna.

(function( $ ) {
    $.fn.checked = function(value) {
        if(value === true || value === false) {
            // Set the value of the checkbox
            $(this).each(function(){ this.checked = value; });
        } 
        else if(value === undefined || value === 'toggle') {
            // Toggle the checkbox
            $(this).each(function(){ this.checked = !this.checked; });
        }

        return this;
    };
})( jQuery );

Alternatifnya, jika Anda tidak ingin menggunakan plugin, Anda dapat menggunakan cuplikan kode berikut:

// Check
$(':checkbox').prop('checked', true);

// Un-check
$(':checkbox').prop('checked', false);

// Toggle
$(':checkbox').prop('checked', function (i, value) {
    return !value;
});

284
2018-05-06 19:31



Anda dapat melakukan

$('.myCheckbox').attr('checked',true) //Standards compliant

atau

$("form #mycheckbox").attr('checked', true)

Jika Anda memiliki kode khusus dalam acara onclick untuk kotak centang yang ingin Anda aktifkan, gunakan yang ini sebagai gantinya:

$("#mycheckbox").click();

Anda dapat menghapus centang dengan menghapus atribut seluruhnya:

$('.myCheckbox').removeAttr('checked')

Anda dapat memeriksa semua kotak centang seperti ini:

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});

129
2018-01-08 22:24



Anda juga dapat memperpanjang objek $ .fn dengan metode baru:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

Maka Anda bisa lakukan:

$(":checkbox").check();
$(":checkbox").uncheck();

Atau Anda mungkin ingin memberi mereka nama yang lebih unik seperti mycheck () dan myuncheck () jika Anda menggunakan beberapa pustaka lain yang menggunakan nama-nama itu.


67
2017-08-20 18:19



$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

Yang terakhir akan mengaktifkan event klik untuk kotak centang, yang lain tidak. Jadi, jika Anda memiliki kode khusus dalam aktivitas onclick untuk kotak centang yang ingin Anda aktifkan, gunakan yang terakhir.


58
2018-01-08 22:36



Untuk memeriksa kotak centang yang harus Anda gunakan

 $('.myCheckbox').attr('checked',true);

atau

 $('.myCheckbox').attr('checked','checked');

dan untuk tidak mencentang kotak centang, Anda harus selalu menyetelnya ke false:

 $('.myCheckbox').attr('checked',false);

Jika kamu melakukan

  $('.myCheckbox').removeAttr('checked')

itu menghilangkan atribut bersama-sama dan karena itu Anda tidak akan dapat mengatur ulang formulir.

BAD DEMO jQuery 1.6. Saya pikir ini rusak. Untuk 1,6 saya akan membuat posting baru tentang itu.

DEMO KERJA BARU jQuery 1.5.2 berfungsi di Chrome.

Kedua demo digunakan

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});

56
2018-03-23 15:22