Saya ingin melakukan sesuatu seperti ini untuk mencentang checkbox
menggunakan jQuery :
$(".myCheckBox").checked(true);
atau
$(".myCheckBox").selected(true);
Apakah hal semacam itu ada?
$("#mycheckbox").click();
Saya ingin melakukan sesuatu seperti ini untuk mencentang checkbox
menggunakan jQuery :
$(".myCheckBox").checked(true);
atau
$(".myCheckBox").selected(true);
Apakah hal semacam itu ada?
$("#mycheckbox").click();
Jawaban:
Gunakan .prop()
:
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
Jika Anda bekerja hanya dengan satu elemen, Anda selalu dapat mengakses dasarnya HTMLInputElement
dan memodifikasi .checked
propertinya:
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
Manfaat menggunakan .prop()
dan .attr()
metode daripada ini adalah bahwa mereka akan beroperasi pada semua elemen yang cocok.
The .prop()
Metode ini tidak tersedia, sehingga Anda perlu menggunakan .attr()
.
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
Perhatikan bahwa ini adalah pendekatan yang digunakan oleh unit test jQuery sebelum versi 1.6 dan lebih disukai untuk digunakan $('.myCheckbox').removeAttr('checked');
karena yang terakhir akan, jika kotak awalnya dicentang, mengubah perilaku panggilan ke .reset()
pada bentuk apa pun yang berisi itu - halus tapi mungkin perubahan perilaku yang tidak disukai.
Untuk lebih banyak konteks, beberapa diskusi tidak lengkap tentang perubahan penanganan checked
atribut / properti dalam transisi dari 1.5.x ke 1.6 dapat ditemukan di catatan rilis versi 1.6 dan bagian Atribut vs Properti dari .prop()
dokumentasi .
DOMElement.checked = true
". Tapi itu bisa diabaikan, karena itu hanya satu elemen ...
$(element).prop('checked')
adalah pemborosan mengetik. element.checked
ada dan harus digunakan dalam kasus-kasus di mana Anda sudah memilikielement
Menggunakan:
$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);
Dan jika Anda ingin memeriksa apakah kotak centang dicentang atau tidak:
$('.myCheckbox').is(':checked');
Ini adalah cara yang benar untuk memeriksa dan menghapus centang pada kotak centang dengan jQuery, karena ini adalah standar lintas-platform, dan akan memungkinkan repost formulir.
$('.myCheckBox').each(function(){ this.checked = true; });
$('.myCheckBox').each(function(){ this.checked = false; });
Dengan melakukan ini, Anda menggunakan standar JavaScript untuk memeriksa dan menghapus centang pada kotak centang, sehingga peramban yang mengimplementasikan properti "kotak centang" elemen kotak centang dengan benar akan menjalankan kode ini dengan sempurna. Ini harus semua browser utama, tetapi saya tidak dapat menguji sebelum Internet Explorer 9.
Masalahnya (jQuery 1.6):
Setelah pengguna mengklik kotak centang, kotak centang itu berhenti merespons perubahan atribut yang "dicentang".
Berikut adalah contoh atribut kotak centang gagal melakukan pekerjaan setelah seseorang mengklik kotak centang (ini terjadi di Chrome).
Solusinya:
Dengan menggunakan properti "dicentang" JavaScript pada elemen DOM , kami dapat menyelesaikan masalah secara langsung, alih-alih mencoba memanipulasi DOM agar melakukan apa yang kami inginkan .
Plugin ini akan mengubah properti yang dicentang dari setiap elemen yang dipilih oleh jQuery, dan berhasil memeriksa dan menghapus centang pada kotak 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 );
Atau, jika Anda tidak ingin menggunakan plugin, Anda dapat menggunakan potongan kode berikut:
// Check
$(':checkbox').prop('checked', true);
// Un-check
$(':checkbox').prop('checked', false);
// Toggle
$(':checkbox').prop('checked', function (i, value) {
return !value;
});
removeAttr('checked')
daripadaattr('checked', false)
checked
perubahan atribut, terlepas dari metode yang digunakan untuk mengubahnya.
$('.myCheckBox').prop('checked', true)
Dengan begitu, itu akan secara otomatis berlaku untuk seluruh rangkaian elemen yang cocok (hanya saat pengaturan sekalipun, mendapatkan masih yang pertama)
prop
jelas merupakan cara yang tepat untuk mengatur atribut pada suatu elemen.
Anda dapat melakukan
$('.myCheckbox').attr('checked',true) //Standards compliant
atau
$("form #mycheckbox").attr('checked', true)
Jika Anda memiliki kode khusus di acara onclick untuk kotak centang yang ingin Anda jalankan, gunakan yang ini sebagai gantinya:
$("#mycheckbox").click();
Anda dapat menghapus centang dengan menghapus atribut seluruhnya:
$('.myCheckbox').removeAttr('checked')
Anda dapat mencentang semua kotak centang seperti ini:
$(".myCheckbox").each(function(){
$("#mycheckbox").click()
});
$(".myCheckbox").click()
.attr
alih-alih .prop
.
$("#mycheckbox").click();
bekerja untuk saya karena saya juga mendengarkan acara perubahan dan .attr
& .prop
tidak memecat acara perubahan.
Anda juga dapat memperluas 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 melakukan:
$(":checkbox").check();
$(":checkbox").uncheck();
Atau Anda mungkin ingin memberi mereka lebih banyak nama unik seperti mycheck () dan myuncheck () jika Anda menggunakan perpustakaan lain yang menggunakan nama-nama itu.
.attr
alih-alih .prop
.
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();
Yang terakhir akan mem-klik event klik untuk kotak centang, yang lain tidak. Jadi, jika Anda memiliki kode khusus di acara onclick untuk kotak centang yang ingin Anda jalankan, gunakan yang terakhir.
.attr
alih-alih .prop
.
click
acara tidak dapat diandalkan di Firefox dan Edge.
Untuk mencentang kotak centang yang harus Anda gunakan
$('.myCheckbox').attr('checked',true);
atau
$('.myCheckbox').attr('checked','checked');
dan untuk menghapus centang pada kotak centang Anda harus selalu mengaturnya ke false:
$('.myCheckbox').attr('checked',false);
Jika kamu melakukan
$('.myCheckbox').removeAttr('checked')
itu menghapus semua 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 bekerja di Chrome.
Keduanya menggunakan demo
$('#tc').click(function() {
if ( $('#myCheckbox').attr('checked')) {
$('#myCheckbox').attr('checked', false);
} else {
$('#myCheckbox').attr('checked', 'checked');
}
});
$(".mycheckbox").prop("checked", true/false)
Ini memilih elemen yang memiliki atribut yang ditentukan dengan nilai yang mengandung substring "ckbItem" yang diberikan:
$('input[name *= ckbItem]').prop('checked', true);
Ini akan memilih semua elemen yang mengandung ckbItem dalam atribut namanya.
Dengan asumsi bahwa pertanyaannya adalah ...
Ingat bahwa dalam set kotak centang tipikal, semua tag input memiliki nama yang sama, mereka berbeda berdasarkan atributvalue
: tidak ada ID untuk setiap input set.
Jawaban Xian dapat diperpanjang dengan pemilih yang lebih spesifik , menggunakan baris kode berikut:
$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
Saya melewatkan solusi. Saya akan selalu menggunakan:
if ($('#myCheckBox:checked').val() !== undefined)
{
//Checked
}
else
{
//Not checked
}
.val()
akan selalu kembali undefined
ketika dipanggil pada 0 elemen untuk mendeteksi bahwa objek jQuery kosong, ketika Anda bisa cukup periksa .length
saja) - lihat stackoverflow.com/questions/901712/… untuk pendekatan yang lebih mudah dibaca.
Untuk memeriksa kotak centang menggunakan jQuery 1.6 atau lebih tinggi lakukan ini:
checkbox.prop('checked', true);
Untuk menghapus centang, gunakan:
checkbox.prop('checked', false);
Inilah yang ingin saya gunakan untuk mengaktifkan kotak centang menggunakan jQuery:
checkbox.prop('checked', !checkbox.prop('checked'));
Jika Anda menggunakan jQuery 1.5 atau lebih rendah:
checkbox.attr('checked', true);
Untuk menghapus centang, gunakan:
checkbox.attr('checked', false);
Inilah 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 adalah kode untuk dicentang dan tidak dicentang 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;
});
});
Pembaruan: Ini adalah blok kode yang sama menggunakan metode prop Jquery 1.6+ yang lebih baru, 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;
});
});
.attr
alih-alih .prop
.
Kita bisa menggunakan elementObject
jQuery untuk memeriksa atribut:
$(objectElement).attr('checked');
Kita dapat menggunakan ini untuk semua versi jQuery tanpa kesalahan.
Pembaruan: Jquery 1.6+ memiliki metode penyangga baru yang menggantikan attr, misalnya:
$(objectElement).prop('checked');
.attr
alih-alih .prop
.
Jika Anda menggunakan PhoneGap melakukan pengembangan aplikasi, dan Anda memiliki nilai pada tombol yang ingin Anda tampilkan secara instan, jangan lupa lakukan ini
$('span.ui-[controlname]',$('[id]')).text("the value");
Saya menemukan bahwa tanpa rentang, antarmuka tidak akan memperbarui apa pun yang Anda lakukan.
Berikut adalah kode dan demo untuk cara memeriksa beberapa kotak centang ...
http://jsfiddle.net/tamilmani/z8TTt/
$("#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;
}
}
});
$("#check")
dengan panggilan API DOM mentah document.getElementsByTagName("input")
sepertinya tidak cocok bagi saya, terutama mengingat bahwa for
loop di sini dapat dihindari dengan menggunakan .prop()
. Bagaimanapun ini adalah jawaban terlambat lain yang tidak menambahkan sesuatu yang baru.
Solusi lain yang mungkin:
var c = $("#checkboxid");
if (c.is(":checked")) {
$('#checkboxid').prop('checked', false);
} else {
$('#checkboxid').prop('checked', true);
}
Seperti yang dikatakan @ livefree75:
jQuery 1.5.x dan di bawah
Anda juga dapat memperluas 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));
Tetapi dalam versi baru jQuery, kita harus menggunakan sesuatu seperti ini:
jQuery 1.6+
(function($) {
$.fn.extend({
check : function() {
return this.filter(":radio, :checkbox").prop("checked", true);
},
uncheck : function() {
return this.filter(":radio, :checkbox").prop("checked",false);
}
});
}(jQuery));
Maka Anda bisa melakukan:
$(":checkbox").check();
$(":checkbox").uncheck();
Jika menggunakan seluler dan Anda ingin antarmuka memperbarui dan menampilkan kotak centang sebagai tidak dicentang, gunakan yang berikut:
$("#checkbox1").prop('checked', false).checkboxradio("refresh");
Waspadai kebocoran memori di Internet Explorer sebelum Internet Explorer 9 , karena dokumentasi jQuery menyatakan :
Di Internet Explorer sebelum versi 9, menggunakan .prop () untuk mengatur properti elemen DOM menjadi apa pun selain nilai primitif sederhana (angka, string, atau boolean) dapat menyebabkan kebocoran memori jika properti tidak dihapus (menggunakan .removeProp ( )) sebelum elemen DOM dihapus dari dokumen. Untuk menetapkan nilai pada objek DOM dengan aman tanpa kebocoran memori, gunakan .data ().
.prop('checked',true)
.
Untuk memeriksa dan menghapus centang
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
$('controlCheckBox').click(function(){
var temp = $(this).prop('checked');
$('controlledCheckBoxes').prop('checked', temp);
});
Ini mungkin solusi terpendek dan termudah:
$(".myCheckBox")[0].checked = true;
atau
$(".myCheckBox")[0].checked = false;
Bahkan lebih pendek adalah:
$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;
Berikut ini adalah sebuah jsFiddle juga.
JavaScript polos sangat sederhana dan lebih sedikit overhead:
var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
elements[i].checked = true;
}
Saya tidak bisa membuatnya bekerja menggunakan:
$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');
Benar dan salah akan memeriksa kotak centang. Apa yang berhasil untuk saya adalah:
$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', ''); // For unchecking
true
dan false
dan tidak 'true'
dan 'false'
?
'false'
dikonversi ke nilai boolean yang mengakibatkan true
- string kosong dievaluasi false
sehingga "bekerja". Lihat biola ini misalnya apa yang saya maksud.
Ketika Anda mencentang kotak centang seperti;
$('.className').attr('checked', 'checked')
itu mungkin tidak cukup. Anda juga harus memanggil fungsi di bawah ini;
$('.className').prop('checked', 'true')
Terutama ketika Anda menghapus atribut centang kotak centang.
Inilah jawaban lengkapnya menggunakan jQuery
Saya mengujinya dan berfungsi 100%: D
// when the button (select_unit_button) is clicked it returns all the checed checkboxes values
$("#select_unit_button").on("click", function(e){
var arr = [];
$(':checkbox:checked').each(function(i){
arr[i] = $(this).val(); // u can get id or anything else
});
//console.log(arr); // u can test it using this in google chrome
});
Di jQuery,
if($("#checkboxId").is(':checked')){
alert("Checked");
}
atau
if($("#checkboxId").attr('checked')==true){
alert("Checked");
}
Dalam JavaScript,
if (document.getElementById("checkboxID").checked){
alert("Checked");
}
.attr
alih-alih .prop
.