Pengaturan "dicentang" untuk kotak centang jQuery?

Saya ingin melakukan sesuatu yang mirip dengan menandai checkbox dengan jQuery :

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

atau

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

Apakah ada hal seperti itu?

3600
09 янв. tpower diatur 09 Jan 2009-01-09 01:20 '09 pada 1:20 2009-01-09 01:20
@ 38 jawaban
  • 1
  • 2

jQuery 1.6 +

Gunakan metode .prop() :

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

jQuery 1.5.x dan di bawah

Metode .prop() tidak tersedia, jadi Anda perlu menggunakan .attr() .

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

Harap dicatat bahwa ini adalah pendekatan yang digunakan oleh tes modular jQuery hingga versi 1.6 dan lebih disukai untuk digunakan

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

karena yang terakhir akan, jika kotak centang pada awalnya ditetapkan, akan mengubah perilaku panggilan .reset() dalam bentuk apa pun yang berisi itu - perubahan yang halus, tapi mungkin tidak diinginkan, dalam perilaku.

Untuk deskripsi yang lebih rinci tentang beberapa diskusi yang tidak lengkap tentang perubahan dalam pemrosesan atribut / properti ketika pindah dari 1.5.x ke 1.6, Anda dapat menemukan di versi 1.6 dan dokumentasi Atribut dan Properti .prop() .

Versi jQuery apa pun

Jika Anda hanya bekerja dengan satu elemen, Anda selalu dapat mengubah properti HTMLInputElement .checked :

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

Keuntungan menggunakan metode .prop() dan .attr() sebagai gantinya adalah bahwa mereka bekerja dengan semua elemen yang konsisten.

5405
09 янв. jawabannya diberikan Xian 09 januari. 2009-01-09 01:25 '09 pada 1:25 pagi 2009-01-09 01:25

Gunakan:

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

Dan jika Anda ingin memeriksa apakah kotak dicentang atau tidak:

 $('.myCheckbox').is(':checked'); 
623
09 янв. Jawabannya diberikan bchhun 09 Jan 2009-01-09 01:25 '09 pada 1:25 pagi 2009-01-09 01:25

Ini adalah cara yang tepat untuk memeriksa dan menghapus centang flag menggunakan jQuery, karena ini adalah standar lintas platform dan memungkinkan Anda untuk mengirim laporan.

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

Pada saat yang sama, Anda menggunakan standar JavaScript untuk memeriksa dan menghapus centang pada kotak centang, sehingga setiap browser yang mengimplementasikan properti yang dicentang dari elemen kotak centang akan bekerja dengan sempurna dengan kode ini. Seharusnya semua browser utama, tetapi saya tidak dapat menguji Internet Explorer 9 sebelumnya.

Masalah (jQuery 1.6):

Segera setelah pengguna mengklik kotak centang, kotak centang berhenti merespons perubahan pada atribut "dicentang".

Berikut adalah contoh atribut kotak centang yang gagal dilakukan tugas setelah seseorang mengklik kotak centang ini (ini terjadi di Chrome).

Feeddle

Solusi:

Menggunakan properti JavaScript yang "dicentang" pada elemen DOM , kita dapat menyelesaikan masalah secara >

Feeddle

Plugin ini akan mengubah properti yang dicentang dari setiap elemen yang dipilih oleh jQuery dan berhasil memeriksa dan menghapus centang pada kotak centang dalam keadaan apa pun. Jadi, meskipun ini mungkin tampak seperti keputusan yang tidak perlu, itu akan membuat situs web Anda lebih nyaman 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; }); 
284
06 мая '11 в 22:31 2011-05-06 22:31 Balasan diberikan oleh cwharris 06 Mei 11 di 22:31 2011-05-06 22:31

Anda bisa melakukannya

 $('.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:

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

Anda dapat menghapus centang pada kotak dengan sepenuhnya menghapus atribut:

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

Anda dapat memeriksa semua kotak centang sebagai berikut:

 $(".myCheckbox").each(function(){ $("#mycheckbox").click() }); 
130
09 янв. jawab Micah 09 Jan 2009-01-09 01:24 '09 pada 1:24 2009-01-09 01:24

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 bisa memberi mereka lebih banyak nama unik, seperti mycheck () dan myuncheck (), jika Anda menggunakan perpustakaan lain yang menggunakan nama-nama ini.

67
20 авг. jawabannya diberikan livefree75 20 Agustus. 2010-08-20 21:19 '10 pada 21:19 2010-08-20 21:19
 $("#mycheckbox")[0].checked = true; $("#mycheckbox").attr('checked', true); $("#mycheckbox").click(); 

Yang terakhir mengaktifkan acara klik untuk kotak centang ini, tetapi yang lain tidak. Oleh karena itu, jika Anda memiliki kode khusus di acara onclick untuk kotak centang yang ingin Anda jalankan, gunakan yang terakhir.

58
09 янв. Jawaban diberikan oleh Chris Brandsma 09 Jan 2009-01-09 01:36 '09 pada 1:36 2009-01-09 01:36

Untuk mencentang kotak, Anda harus menggunakan

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

atau

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

dan untuk mengosongkan kotak centang, Anda harus selalu menetapkan nilai ke false

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

Jika Anda lakukan

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

itu menghapus atribut bersama-sama, dan karena itu Anda tidak dapat mengatur u>

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

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'); } }); 
56
23 марта '11 в 18:22 2011-03-23 18:22 jawabannya diberikan oleh mcgrailm 23 Maret '11 pukul 18:22 2011-03-23

Dengan asumsi pertanyaan ...

Bagaimana cara mengatur kotak centang DENGAN NILAI?

Ingatlah bahwa dalam kotak centang tipikal semua tag input memiliki nama yang sama, mereka berbeda dalam atribut value : tidak ada pengidentifikasi untuk setiap input set.

Respons Xi'an dapat diperluas dengan pemilih yang lebih spesifik menggunakan baris kode berikut:

 $("input.myclass[name='myname'][value='the_value']").prop("checked", true); 
42
09 марта '12 в 15:28 2012-03-09 15:28 jawabannya diberikan oleh Peter Krauss 09 Maret '12 pada 15:28 2012-03-09 15:28

Saya rindu solusinya. Saya akan selalu menggunakan:

 if ($('#myCheckBox:checked').val() !== undefined) { //Checked } else { //Not checked } 
42
24 июня '12 в 14:33 2012-06-24 14:33 jawabannya diberikan oleh Overbeeke pada 24 Juni '12 pada 14:33 2012-06-24 14:33

Ini memilih item yang memiliki atribut yang ditentukan dengan nilai yang mengandung substring "ckbItem" yang diberikan:

 $('input[name *= ckbItem]').prop('checked', true); 

Dia akan memilih semua item yang mengandung ckbItem di properti nama.

37
20 сент. jawabannya diberikan oleh Abou-Emish 20 September . 2010-09-20 14:43 '10 pada pukul 14:43 2010-09-20 14:43

Untuk mengatur bendera menggunakan jQuery 1.6 atau lebih tinggi, lakukan hal berikut:

 checkbox.prop('checked', true); 

Untuk menghapus centang pada kotak, gunakan:

 checkbox.prop('checked', false); 

Inilah yang ingin saya gunakan untuk mengganti flag dengan jQuery:

 checkbox.prop('checked', !checkbox.prop('checked')); 

Jika Anda menggunakan jQuery 1.5 atau lebih rendah:

 checkbox.attr('checked', true); 

Untuk menghapus centang pada kotak, gunakan:

 checkbox.attr('checked', false); 
36
14 марта '13 в 12:40 2013-03-14 12:40 Jawaban diberikan oleh Ramon de Jesus pada 14 Maret 13 di 12:40 2013-03-14 12:40

Inilah cara untuk melakukan ini tanpa jQuery

 <label>Click Me! <input id="cb" type="checkbox" /> </label> <label>Reflection: <input id="rcb" type="checkbox" /> </label> 
33
23 окт. Jawab Aeoril 23 Okt 2012-10-23 03:41 '12 pada pukul 3:41 2012-10-23 03:41

Coba yang berikut ini:

 $('#checkboxid').get(0).checked = true; //For checking $('#checkboxid').get(0).checked = false; //For unchecking 
28
10 сент. Jawabannya diberikan prashanth 10 Sep. 2012-09-10 13:26 '12 pada 1:26 siang 2012-09-10 13:26

Berikut adalah kode untuk yang ditandai dan tidak dicentang menggunakan 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; }); }); 

Perbarui Berikut adalah blok kode yang sama yang menggunakan metode dukungan Jquery 1.6+ 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; }); }); 
25
25 окт. balasan yang diberikan oleh starjahid 25 Okt 2011-10-25 11:51 '11 pada 11:51 2011-10-25 11:51

Kita dapat menggunakan elementObject dengan jQuery untuk menguji 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'); 
23
24 июня '11 в 11:27 2011-06-24 11:27 jawabannya diberikan oleh Prasanth P pada 24 Juni '11 di 11:27 2011-06-24 11:27

Jika Anda menggunakan pengembangan aplikasi PhoneGap , dan Anda memiliki nilai pada tombol yang ingin Anda tampilkan secara instan, jangan lupa untuk melakukannya.

 $('span.ui-[controlname]',$('[id]')).text("the value"); 

Saya menemukan bahwa tanpa rentang, antarmuka tidak akan diperbarui apa pun yang Anda lakukan.

23
17 апр. Jawabannya diberikan Clement Ho 17 Apr. 2012-04-17 09:34 '12 pada jam 9:34 2012-04-17 09:34

Berikut ini adalah kode dan demonstrasi 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; } } }); 
22
16 авг. Jawabannya diberikan tamilmani 16 Agustus. 2013-08-16 09:17 '13 pada 9:17 2013-08-16 09:17

Solusi lain yang mungkin:

  var c = $("#checkboxid"); if (c.is(":checked")) { $('#checkboxid').prop('checked', false); } else { $('#checkboxid').prop('checked', true); } 
19
12 окт. balasan yang diberikan oleh Muhammad Aamir Ali pada 12 Oktober. 2013-10-12 11:23 '13 pada 11:23 2013-10-12 11:23

Untuk jQuery 1.6 +

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

Untuk jQuery 1.5.x dan di bawah

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

Untuk memeriksa

 $('.myCheckbox').removeAttr('checked'); 
17
21 апр. jawabannya diberikan logan 21 Apr 2015-04-21 13:29 '15 jam 1:29 siang 2015-04-21 13:29

Ingat tentang kebocoran memori di Internet Explorer sebelum Internet Explorer 9 , seperti status dokumentasi jQuery :

Di Internet Explorer hingga versi 9, menggunakan .prop () mengatur elemen DOM untuk apa pun selain nilai primitif sederhana (angka, string atau boolean) dapat menyebabkan kebocoran memori jika properti tidak dihapus (menggunakan .removeProp ()) sebelum menghapus Elemen DOM dari dokumen. Dengan aman mengatur nilai untuk objek DOM tanpa memori kebocoran, gunakan. Data ().

17
22 мая '13 в 10:25 2013-05-22 10:25 jawabannya diberikan naor 22 Mei '13 pukul 10:25 2013-05-22 10:25

Jika Anda menggunakan ponsel dan Anda ingin antarmuka diperbarui dan kotak centang ditampilkan sebagai dihapus, gunakan yang berikut ini:

 $("#checkbox1").prop('checked', false).checkboxradio("refresh"); 
17
11 янв. Jawabannya diberikan oleh Matt Peacock 11 Januari. 2013-01-11 16:05 '13 pada 16:05 2013-01-11 16:05

Untuk memeriksa dan menghapus centang

 $('.myCheckbox').prop('checked', true); $('.myCheckbox').prop('checked', false); 
16
14 нояб. jawabannya diberikan jj2422 14 Nov. 2013-11-14 09:34 '13 pada 9:34 2013-11-14 09:34
 $('controlCheckBox').click(function(){ var temp = $(this).prop('checked'); $('controlledCheckBoxes').prop('checked', temp); }); 
15
16 июля '13 в 5:10 2013-07-16 05:10 jawabannya diberikan mahmoh 16 Juli '13 pada 5:10 pagi 2013-07-16 05:10

Ini mungkin solusi terpendek dan paling sederhana:

 $(".myCheckBox")[0].checked = true; 

atau

 $(".myCheckBox")[0].checked = false; 

Bahkan lebih pendek adalah:

 $(".myCheckBox")[0].checked = !0; $(".myCheckBox")[0].checked = !1; 

Ini jsFiddle .

14
27 мая '14 в 18:11 2014-05-27 18:11 jawabannya diberikan oleh frieder pada 27 Mei '14 pukul 18:11 2014-05-27 18:11

JavaScript biasa sangat sederhana dan lebih sedikit overhead:

 var elements = document.getElementsByClassName('myCheckBox'); for(var i = 0; i < elements.length; i++) { elements[i].checked = true; } 

Contoh di sini

13
18 сент. Jawabannya diberikan Alex W 18 September. 2013-09-18 04:14 '13 pada 4:14 2013-09-18 04:14

Ketika Anda menandai kotak, misalnya:

 $('.className').attr('checked', 'checked') 

ini mungkin tidak cukup. Anda juga harus memanggil fungsi di bawah ini;

 $('.className').prop('checked', 'true') 

Terutama ketika Anda menghapus centang pada kotak centang atribut.

12
05 марта '15 в 16:10 2015-03-05 16:10 jawabannya diberikan oleh Serhat Koroglu 05 Maret '15 pada 16:10 2015-03-05 16:10

Saya tidak bisa membuatnya bekerja menggunakan:

 $("#cb").prop('checked', 'true'); $("#cb").prop('checked', 'false'); 

Benar dan salah menetapkan bendera. Apa yang berhasil untuk saya:

 $("#cb").prop('checked', 'true'); // For checking $("#cb").prop('checked', ''); // For unchecking 
11
05 янв. jawabannya diberikan fredcrs 05 jan. 2012-01-05 16:26 '12 pada 16:26 2012-01-05 16:26

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(); 
11
23 сент. jawabannya diberikan oleh Ardalan Shahgholi 23 Sep 2016-09-23 21:43 '16 pada 21:43 2016-09-23 21:43

JQuery

 if($("#checkboxId").is(':checked')){ alert("Checked"); } 

atau

 if($("#checkboxId").attr('checked')==true){ alert("Checked"); } 

Dalam javascript

 if (document.getElementById("checkboxID").checked){ alert("Checked"); } 
10
10 июня '13 в 16:17 2013-06-10 16:17 jawabannya diberikan oleh ijarlax 10 Juni '13 pada 16:17 2013-06-10 16:17

Inilah jawaban lengkapnya menggunakan jQuery

Saya mengujinya, dan bekerja pada 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 }); 
10
27 февр. jawaban yang diberikan oleh user1477929 pada 27 Februari 2013-02-27 18:49 '13 pada pukul 18:49 2013-02-27 18:49
  • 1
  • 2

Pertanyaan lain tentang tag tag atau Ajukan pertanyaan