Bagaimana cara memeriksa apakah jQuery dicentang?

Saya perlu checked properti flag yang checked dan melakukan tindakan berdasarkan properti yang diverifikasi menggunakan jQuery.

Misalnya, jika kotak centang usia dicentang, maka saya perlu menampilkan kotak teks untuk memasukkan usia, jika tidak, sembunyikan kotak teks.

Tetapi kode berikut mengembalikan false secara default:

 if ($('#isAgeSelected').attr('checked')) { $("#txtAge").show(); } else { $("#txtAge").hide(); } 

Bagaimana cara berhasil mengambil properti yang checked ?

3928
23 мая '09 в 18:16 2009-05-23 18:16 Prasad diberikan pada 23 Mei 2009 di 18:16 2009-05-23 18:16
@ 58 jawaban
  • 1
  • 2

Ini bekerja untuk saya:

 $get("isAgeSelected ").checked == true 

Di mana isAgeSelected adalah ID kontrol.

Selain itu, jawaban @ karim79 berfungsi dengan baik. Saya tidak yakin apa yang saya lewatkan ketika saya mengujinya.

Catatan Jawaban ini menggunakan Microsoft Ajax, bukan jQuery.

83
24 мая '09 в 8:30 2009-05-24 08:30 jawabannya diberikan Prasad 24 Mei 2009 di 8:30 2009-05-24 08:30

Bagaimana saya bisa menjalankan permintaan untuk properti yang diverifikasi?

Properti yang checked dari elemen kotak centang DOM akan memberi Anda keadaan checked dari item tersebut.

Dengan kode yang ada, Anda dapat melakukan ini:

 if(document.getElementById('isAgeSelected').checked) { $("#txtAge").show(); } else { $("#txtAge").hide(); } 
border=0

Namun, ada cara yang lebih indah untuk melakukan ini menggunakan toggle :

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="isAgeSelected"/> <div id="txtAge" style="display:none">Age is something</div> 
3106
23 мая '09 в 18:20 2009-05-23 18:20 jawabannya diberikan oleh karim79 pada 23 Mei 2009 di 18:20 2009-05-23 18:20

Gunakan fungsi jQuery is () :

 if($("#isAgeSelected").is(':checked')) $("#txtAge").show(); // checked else $("#txtAge").hide(); // unchecked 
1553
22 июня '11 в 13:14 2011-06-22 13:14 jawabannya diberikan kepada Bhanu Krishnan pada 22 Juni '11 pukul 1:14 malam 2011-06-22 13:14

Menggunakan jQuery> 1.6

 <input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" /> // traditional attr $('#checkMeOut').attr('checked'); // "checked" // new property method $('#checkMeOut').prop('checked'); // true 

Menggunakan metode properti baru:

 if($('#checkMeOut').prop('checked')) { // something when checked } else { // something else when not } 
474
23 июня '11 в 20:29 2011-06-23 20:29 jawabannya diberikan oleh SeanDowney pada tanggal 23 Juni '11 pada 20:29 2011-06-23 20:29

jQuery 1.6 +

 $('#isAgeSelected').prop('checked') 

jQuery 1.5 dan di bawah

 $('#isAgeSelected').attr('checked') 

Versi jQuery apa pun

 // Assuming an event handler on a checkbox if (this.checked) 

Semua pinjaman adalah Xian .

179
20 мая '14 в 23:03 2014-05-20 23:03 jawabannya diberikan ungalcrys 20 Mei '14 pukul 23:03 2014-05-20 23:03

Saya menggunakannya dan bekerja dengan sangat baik:

 $("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked"); 

Catatan Jika dicentang, itu akan mengembalikan nilai true jika tidak ditentukan, maka sebaiknya periksa nilai TRUE.

149
19 авг. Jawabannya diberikan Pradeep 19 Agustus. 2010-08-19 16:38 '10 pada 16:38 2010-08-19 16:38

Gunakan:

 <input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned $("#planned_checked").change(function() { if($(this).prop('checked')) { alert("Checked Box Selected"); } else { alert("Checked Box deselect"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned 
117
29 авг. jawabannya diberikan Lalji Dhameliya 29 Agustus. 2016-08-29 14:38 '16 pada 14:38 2016-08-29 14:38

Sejak jQuery 1.6, perilaku jQuery.attr() telah berubah, dan pengguna disarankan untuk tidak menggunakannya untuk mengambil status yang ditandai oleh suatu elemen. Sebagai gantinya, Anda harus menggunakan jQuery.prop() :

 $("#txtAge").toggle( $("#isAgeSelected").prop("checked") // For checked attribute it returns true/false; // Return value changes with checkbox state ); 

Dua fitur lainnya:

 $("#txtAge").get(0).checked $("#txtAge").is(":checked") 
106
27 апр. jawabannya diberikan oleh Salman A 27 April. 2012-04-27 14:54 '12 pada 14:54 2012-04-27 14:54

Jika Anda menggunakan versi jquery yang diperbarui, Anda harus .prop metode .prop untuk menyelesaikan masalah Anda:

$('#isAgeSelected').prop('checked') mengembalikan true jika dicentang, dan false jika tidak disetel. Saya mengkonfirmasi ini dan saya mengalami masalah ini sebelumnya. $('#isAgeSelected').attr('checked') dan $('#isAgeSelected').is('checked') mengembalikan undefined , yang bukan jawaban yang baik untuk situasi tersebut. Lakukan seperti yang ditunjukkan di bawah ini.

 if($('#isAgeSelected').prop('checked')) { $("#txtAge").show(); } else { $("#txtAge").hide(); } 

Semoga ini bisa membantu :) - Terima kasih.

80
25 авг. balasan yang diberikan oleh Rajesh Omanakuttan 25 Agustus. 2013-08-25 06:11 '13 pada 6:11 pagi 2013-08-25 06:11

Menggunakan pengendali event Click untuk properti kotak centang tidak dapat diandalkan, karena properti yang checked dapat berubah selama pelaksanaan pengendali event itu sendiri!

Idealnya, Anda ingin memasukkan kode Anda ke penangan event change , misalnya, kode ini berjalan setiap kali nilai flag berubah (tidak peduli bagaimana itu dilakukan).

 $('#isAgeSelected').bind('change', function () { if ($(this).is(':checked')) $("#txtAge").show(); else $("#txtAge").hide(); }); 
55
06 окт. jawabannya diberikan arviman 06 Oktober. 2011-10-06 04:12 '11 pada 4:12 pada 2011-10-06 04:12

Saya memutuskan untuk mengirim jawaban tentang cara melakukan hal yang sama tanpa jQuery. Hanya karena saya seorang pemberontak.

 var ageCheckbox = document.getElementById('isAgeSelected'); var ageInput = document.getElementById('txtAge'); // Just because of IE <333 ageCheckbox.onchange = function() { // Check if the checkbox is checked, and show/hide the text field. ageInput.hidden = this.checked ? false : true; }; 

Pertama, Anda mendapatkan kedua item dengan id mereka. Kemudian Anda menetapkan acara kotak centang onchange ke fungsi yang memeriksa apakah kotak centang dicentang dan mengatur properti hidden dari bidang teks usia yang sesuai. Contoh ini menggunakan operator ternary.

Di sini Anda memiliki biola untuk memeriksanya.

Tambah

Jika kompatibilitas lintas-browser merupakan masalah, saya sarankan untuk mengatur properti display CSS menjadi tidak ada dan sebaris.

 elem.style.display = this.checked ? 'inline' : 'none'; 

Lebih lambat tapi kompatibel lintas-browser.

50
20 марта '12 в 22:19 2012-03-20 22:19 jawabannya diberikan oleh Octavian Damiean pada 20 Maret '12 pada 10:19 2012-03-20 22:19

Saya pikir Anda bisa melakukan ini:

 if ($('#isAgeSelected :checked').size() > 0) { $("#txtAge").show(); } else { $("#txtAge").hide(); } 
40
23 мая '09 в 18:34 2009-05-23 18:34 jawabannya diberikan xenon 23 Mei '09 pada 18:34 2009-05-23 18:34

Ada banyak cara untuk memeriksa apakah kotak centang dicentang:

Metode validasi JQuery

 if (elem.checked) if ($(elem).prop("checked")) if ($(elem).is(":checked")) if ($(elem).attr('checked')) 

Periksa contoh atau dokumen:

38
14 окт. balasan diberikan kepada Parth Chavda 14 Okt. 2014-10-14 10:48 '14 pada 10:48 2014-10-14 10:48

Saya mengalami masalah yang sama. Saya telah memeriksa ASP.NET

 <asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" /> 

Dalam kode jQuery, saya menggunakan pemilih berikut untuk memeriksa apakah bendera telah disetel atau tidak, dan sepertinya itu berfungsi seperti jimat.

 if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked')) { ... } else { ... } 

Saya yakin Anda juga bisa menggunakan ID, bukan CssClass,

 if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked')) { ... } else { ... } 

Semoga ini bisa membantu Anda.

37
16 дек. Jawabannya diberikan Nertim 16 Des. 2010-12-16 21:50 '10 pada 21:50 2010-12-16 21:50

Ini bekerja untuk saya:

  $("#isAgeSelected").click(function(){ $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide(); }); 
35
06 янв. jawabannya diberikan ashish amatya 06 januari . 2011-01-06 14:33 '11 pada 14:33 2011-01-06 14:33

Ini adalah cara lain untuk melakukan hal yang sama:

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <input type="checkbox" id="isAgeSelected"/> <div id="txtAge" style="display:none">Age is something</div> 
33
24 авг. jawabannya diberikan Sangeet Shah 24 Agustus. 2015-08-24 15:19 '15 pada 15:19 2015-08-24 15:19

Cara saya untuk melakukan ini adalah:

 if ( $("#checkbox:checked").length ) { alert("checkbox is checked"); } else { alert("checkbox is not checked"); } 
30
06 февр. Jawabannya diberikan Dalius I 06 Feb. 2012-02-06 17:31 '12 pada pukul 17:31 2012-02-06 17:31
 $(document).ready(function() { $('#agecheckbox').click(function() { if($(this).is(":checked")) { $('#agetextbox').show(); } else { $('#agetextbox').hide(); } }); }); 
30
25 нояб. Jawaban diberikan oleh Jumper Pot 25 Nov. 2014-11-25 15:25 '14 pada 15:25 2014-11-25 15:25

Anda dapat menggunakan kode ini:

 $('#isAgeSelected').click(function(){ console.log(this.checked); if(this.checked == true) { $("#txtAge").show(); } else { $("#txtAge").hide(); } }); 
30
13 окт. jawaban diberikan oleh sandeep kumar 13 Okt 2016-10-13 09:03 '16 pada jam 9:03 2016-10-13 09:03
 $(selector).attr('checked') !== undefined 

Mengembalikan nilai true jika input diverifikasi dan false jika tidak.

30
12 февр. jawabannya diberikan fe_lix_ 12 Feb. 2012-02-12 18:15 '12 jam 6:15 sore 2012-02-12 18:15

Gunakan ini:

 if ($('input[name="salary_in.Basic"]:checked').length > 0) 

Jika dicentang, panjangnya lebih besar dari nol.

29
27 июля '16 в 12:46 2016-07-27 12:46 jawabannya diberikan oleh Hamid NK pada 27 Juli '16 pada 12:46 2016-07-27 12:46

Anda bisa menggunakan:

  if(document.getElementById('isAgeSelected').checked) $("#txtAge").show(); else $("#txtAge").hide(); 

 if($("#isAgeSelected").is(':checked')) $("#txtAge").show(); else $("#txtAge").hide(); 

Keduanya harus bekerja.

28
28 апр. Jawabannya diberikan oleh Muhammad Awais 28 Apr 2016-04-28 15:07 '16 pada 15:07 2016-04-28 15:07

Contoh ini untuk tombol.

Coba yang berikut ini:

 <input type="button" class="check" id="checkall" value="Check All" />  <input type="button" id="remove" value="Delete" /> <br/> <input type="checkbox" class="cb-element" value="1" /> Checkbox 1 <br/> <input type="checkbox" class="cb-element" value="2" /> Checkbox 2 <br/> <input type="checkbox" class="cb-element" value="3" /> Checkbox 3 <br/> $('#remove').attr('disabled', 'disabled'); $(document).ready(function() { $('.cb-element').click(function() { if($(this).prop('checked')) { $('#remove').attr('disabled', false); } else { $('#remove').attr('disabled', true); } }); $('.check:button').click(function() { var checked = !$(this).data('checked'); $('input:checkbox').prop('checked', checked); $(this).data('checked', checked); if(checked == true) { $(this).val('Uncheck All'); $('#remove').attr('disabled', false); } else if(checked == false) { $(this).val('Check All'); $('#remove').attr('disabled', true); } }); }); 
24
03 янв. jawabannya diberikan oleh usayee 03 Jan 2014-01-03 13:38 '14 pada 13:38 2014-01-03 13:38

Jawaban utama tidak melakukan ini untuk saya. Ini terjadi meskipun:

 <script type="text/javascript"> $(document).ready(function(){ $("#li_13").click(function(){ if($("#agree").attr('checked')){ $("#saveForm").fadeIn(); } else { $("#saveForm").fadeOut(); } }); }); </script> 

Pada dasarnya, ketika elemen # li_13 diklik, elemen ini memeriksa apakah elemen # (yang merupakan kotak centang) setuju dengan fungsi .attr('checked') . Jika ini maka elemen fadeIn #saveForm, dan jika bukan elemen fadeOut saveForm.

23
10 дек. Jawabannya diberikan MDMoore313 10 Des. 2012-12-10 08:02 '12 pada 8:02 2012-12-10 08:02

1) Jika markup HTML Anda:

 <input type="checkbox" /> 

attr:

 $(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set 

Jika prop digunakan:

 $(element).prop("checked"); // Will give you false whether or not initial value is set 

2) Jika markup HTML Anda:

  <input type="checkbox" checked="checked" />// May be like this also checked="true" 

attr:

 $(element).attr("checked") // Will return checked whether it is checked="true" 

Prop yang Digunakan:

 $(element).prop("checked") // Will return true whether checked="checked" 
23
30 окт. jawabannya diberikan oleh Somnath Kharat 30 Oktober. 2013-10-30 15:43 '13 pada 15:43 2013-10-30 15:43

Beralih: 0/1 atau lebih

 <input type="checkbox" id="nolunch" /> <input id="checklunch />" $('#nolunch').change(function () { if ($(this).is(':checked')) { $('#checklunch').val('1'); }; if ($(this).is(':checked') == false) { $('#checklunch').val('0'); }; }); 
21
08 янв. jawaban yang diberikan oleh user2385302 08 Jan 2015-01-08 16:10 '15 pada 16:10 2015-01-08 16:10

Saya menggunakan ini:

  <input type="checkbox" id="isAgeSelected" value="1" /> <br/> <input type="textbox" id="txtAge" /> $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide(); 
19
06 сент. Jawabannya diberikan oleh Nishant Kumar 06 Sep 2013-09-06 09:43 '13 pada 9:43 2013-09-06 09:43

Meskipun Anda telah mengusulkan solusi JavaScript untuk masalah Anda ( textbox ditampilkan saat checkbox checked ), masalah ini hanya dapat diselesaikan dengan bantuan css . Dengan pendekatan ini, formulir Anda berfungsi untuk pengguna yang telah menonaktifkan JavaScript.

Asumsikan Anda memiliki HTML berikut:

 <label for="show_textbox">Show Textbox</label> <input id="show_textbox" type="checkbox" /> <input type="text" /> 

Anda dapat menggunakan CSS berikut untuk mencapai fungsionalitas yang diinginkan:

  #show_textbox:not(:checked) + input[type=text] {display:none;} 

Dalam skenario lain, Anda mungkin berpikir tentang penyeleksi CSS yang sesuai.

Berikut ini skrip yang menunjukkan pendekatan ini .

19
22 авг. Jawabannya diberikan oleh Ormoz pada 22 Agustus. 2015-08-22 22:09 '15 jam 10:09 2015-08-22 22:09
 if($("#checkkBoxId").is(':checked')){ alert("Checked=true"); } 

atau

 if($("#checkkBoxId").attr('checked') == true){ alert("checked=true"); } 
16
10 июня '13 в 16:12 2013-06-10 16:12 jawabannya diberikan oleh ijarlax 10 Juni '13 pada 16:12 2013-06-10 16:12

Saya yakin ini bukan semacam wahyu, tetapi saya tidak melihat semua ini dalam satu contoh:

Selektor untuk semua kotak yang dicentang (di halaman):

 $('input[type=checkbox]:checked') 
15
15 нояб. Jawabannya diberikan Tsonev 15 nov. 2013-11-15 13:50 '13 pada 13:50 2013-11-15 13:50
  • 1
  • 2

Pertanyaan lain tentang tag tag atau Ajukan pertanyaan