I'a ingin melakukan sesuatu seperti ini untuk centang checkbox
menggunakan jQuery:
$(".myCheckBox").checked(true);
atau
$(".myCheckBox").selected(true);
Apakah hal seperti itu ada?
Gunakan .prop()
:
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
Jika anda're bekerja dengan hanya satu elemen, anda selalu dapat hanya akses yang mendasari HTMLInputElement
dan memodifikasi .diperiksa
properti:
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
Manfaat untuk menggunakan .prop()
dan .attr()
metode bukannya ini adalah bahwa mereka akan beroperasi pada cocok semua elemen.
The .prop()
metode ini tidak tersedia, sehingga anda perlu menggunakan .attr()
.
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
Catatan bahwa ini adalah pendekatan yang digunakan oleh jQuery's unit test sebelum versi 1.6 dan adalah lebih baik untuk menggunakan $('.myCheckbox').removeAttr('telah memeriksa');
karena yang terakhir akan, jika kotak itu awalnya diperiksa, mengubah perilaku panggilan ke .reset()
pada setiap formulir yang berisi hal – halus tapi mungkin tidak diinginkan perilaku perubahan.
Untuk konteks yang lebih banyak, beberapa tidak lengkap pembahasan perubahan untuk penanganan diperiksa
atribut/properti dalam transisi dari 1.5.x 1,6 dapat ditemukan dalam versi 1.6 catatan rilis dan Atribut vs Properties bagian dari .prop()
dokumentasi.
Ini adalah cara yang benar untuk memeriksa dan centang kotak centang dengan jQuery, seperti itu adalah cross-platform standar, dan akan memungkinkan bentuk reposts.
$('.myCheckBox').each(function(){ this.checked = true; });
$('.myCheckBox').each(function(){ this.checked = false; });
Dengan melakukan ini, anda menggunakan JavaScript standar untuk memeriksa dan centang kotak centang, sehingga setiap browser yang benar-benar menerapkan "telah memeriksa" properti dari elemen checkbox akan menjalankan kode ini dengan sempurna. Ini harus menjadi semua browser utama, tapi saya tidak mampu untuk tes sebelumnya untuk Internet Explorer 9.
Masalah (jQuery 1.6):
Setelah pengguna mengklik pada kotak centang, bahwa kotak centang berhenti merespons "telah memeriksa" perubahan atribut.
Berikut adalah contoh kotak centang atribut gagal untuk melakukan pekerjaan setelah seseorang telah diklik checkbox (ini terjadi di Chrome).
[Biola][1]
Solusi:
Dengan menggunakan JavaScript's "telah memeriksa" properti di DOM unsur-unsur, kami mampu memecahkan masalah secara langsung, alih-alih mencoba untuk memanipulasi DOM untuk melakukan apa yang kita ingin untuk melakukan.
[Biola][3]
Plugin ini akan mengubah properti diperiksa setiap elemen yang dipilih oleh jQuery, dan berhasil memeriksa dan hapus centang kotak centang di bawah semua keadaan. Jadi, sementara ini mungkin tampak seperti sebuah over-bearing solusi, itu akan membuat situs anda's pengalaman pengguna yang lebih baik, dan membantu mencegah pengguna frustrasi.
(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 );
Atau, 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;
});
Yang dapat anda lakukan
$('.myCheckbox').attr('checked',true) //Standards compliant
atau
$("form #mycheckbox").attr('checked', true)
Jika anda memiliki kode khusus di event onclick untuk kotak centang yang anda inginkan untuk menembak, menggunakan yang satu ini sebagai gantinya:
$("#mycheckbox").click();
Anda dapat hapus centang dengan menghilangkan atribut seluruhnya:
$('.myCheckbox').removeAttr('checked')
Anda dapat memeriksa semua kotak centang seperti ini:
$(".myCheckbox").each(function(){
$("#mycheckbox").click()
});
Anda juga dapat memperpanjang $.fn objek 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));
Kemudian anda hanya dapat melakukan:
$(":checkbox").check();
$(":checkbox").uncheck();
Atau anda mungkin ingin memberi mereka lebih banyak nama-nama yang unik seperti mycheck() dan myuncheck() jika anda menggunakan beberapa perpustakaan lain yang menggunakan nama tersebut.
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();
Yang terakhir akan kebakaran acara klik checkbox, yang lain tidak akan. Jadi jika anda memiliki kode khusus di event onclick untuk kotak centang yang anda inginkan untuk menembak, menggunakan salah satu yang terakhir.
Untuk mencentang kotak yang harus anda gunakan
$('.myCheckbox').attr('checked',true);
atau
$('.myCheckbox').attr('checked','checked');
dan untuk hapus centang kotak centang anda harus selalu diatur ke palsu:
$('.myCheckbox').attr('checked',false);
Jika anda melakukan
$('.myCheckbox').removeAttr('checked')
menghilangkan atribut semua bersama-sama dan oleh karena itu, anda tidak akan dapat untuk me-reset bentuk.
[BURUK DEMO jQuery 1.6][1]. Saya pikir ini adalah rusak. Untuk 1.6 saya akan membuat posting baru itu.
[KERJA BARU DEMO jQuery 1.5.2][2] bekerja di Chrome.
Kedua demo menggunakan
$('#tc').click(function() {
if ( $('#myCheckbox').attr('checked')) {
$('#myCheckbox').attr('checked', false);
} else {
$('#myCheckbox').attr('checked', 'checked');
}
});
Ini akan memilih elemen-elemen yang memiliki atribut tertentu dengan nilai yang mengandung diberikan substring "ckbItem":
$('input[name *= ckbItem]').prop('checked', true);
Ini akan memilih semua elemen yang mengandung ckbItem untuk nama atribut.
Dengan asumsi bahwa yang dimaksud adalah...
Ingat bahwa dalam khas centang set, semua input kategori memiliki nama yang sama, mereka berbeda dengan atribut nilai
: tidak ada ID untuk masing-masing input yang ditetapkan.
Xian's jawaban dapat diperpanjang dengan lebih spesifik pemilih, menggunakan baris kode berikut:
$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
Untuk memeriksa kotak centang menggunakan jQuery 1.6 atau yang lebih tinggi hanya melakukan ini:
checkbox.prop('checked', true);
Untuk hapus centang, gunakan:
checkbox.prop('checked', false);
Berikut ini' s apa yang saya ingin gunakan untuk mengaktifkan kotak centang menggunakan jQuery:
checkbox.prop('checked', !checkbox.prop('checked'));
Jika anda're menggunakan jQuery 1.5 atau lebih rendah:
checkbox.attr('checked', true);
Untuk hapus centang, gunakan:
checkbox.attr('checked', false);
Berikut adalah cara untuk melakukannya tanpa jQuery
function addOrAttachListener(el, type, listener, useCapture) {
if (el.addEventListener) {
el.addEventListener(type, listener, useCapture);
} else if (el.attachEvent) {
el.attachEvent("on" + type, listener);
}
};
addOrAttachListener(window, "load", function() {
var cbElem = document.getElementById("cb");
var rcbElem = document.getElementById("rcb");
addOrAttachListener(cbElem, "click", function() {
rcbElem.checked = cbElem.checked;
}, false);
}, false);
<label>Click Me!
<input id="cb" type="checkbox" />
</label>
<label>Reflection:
<input id="rcb" type="checkbox" />
</label>
Berikut ini adalah kode untuk diperiksa dan terkendali dengan tombol:
var set=1;
var unset=0;
jQuery( function() {
$( '.checkAll' ).live('click', function() {
$( '.cb-element' ).each(function () {
if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
});
set=unset;
});
});
Update: Berikut adalah kode yang sama menggunakan blok baru Jquery 1.6+ prop metode, yang menggantikan attr:
var set=1;
var unset=0;
jQuery( function() {
$( '.checkAll' ).live('click', function() {
$( '.cb-element' ).each(function () {
if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
});
set=unset;
});
});
Kita dapat menggunakan elementObject
dengan jQuery untuk mendapatkan atribut yang diperiksa:
$(objectElement).attr('checked');
Kita dapat menggunakan ini untuk semua versi jQuery tanpa kesalahan.
Update: Jquery 1.6+ memiliki baru prop metode yang menggantikan attr, misalnya:
$(objectElement).prop('checked');
Jika anda menggunakan PhoneGap melakukan pengembangan aplikasi, dan anda memiliki sebuah nilai pada tombol yang ingin anda tampilkan langsung, ingat untuk melakukan hal ini
$('span.ui-[controlname]',$('[id]')).text("the value");
Saya menemukan bahwa tanpa span, antarmuka tidak akan update tidak peduli apa yang anda lakukan.
Berikut adalah kode dan demo untuk bagaimana untuk memeriksa beberapa kotak centang...
$("#check").on("click", function () {
var chk = document.getElementById('check').checked;
var arr = document.getElementsByTagName("input");
if (chk) {
for (var i in arr) {
if (arr[i].name == 'check') arr[i].checked = true;
}
} else {
for (var i in arr) {
if (arr[i].name == 'check') arr[i].checked = false;
}
}
});
Diketahui kebocoran memori di Internet Explorer sebelum Internet Explorer 9, seperti jQuery dokumentasi serikat:
Di Internet Explorer sebelum versi 9, menggunakan .prop() untuk mengatur DOM elemen properti untuk sesuatu yang lain dari yang sederhana primitif nilai (nomor, string atau boolean) dapat menyebabkan kebocoran memori jika properti tidak dihapus (menggunakan .removeProp()) sebelum elemen DOM dihapus dari dokumen. Untuk aman-nilai yang ditetapkan pada DOM benda tanpa memori kebocoran, menggunakan .data().