Як перевірити, чи встановлений прапорець в jQuery?

Мені потрібно перевірити checked властивість прапорця і виконати дію на основі перевіреного властивості за допомогою jQuery.

Наприклад, якщо встановлено прапорець age, тоді мені потрібно показати текстове поле для введення віку, інакше сховайте текстове поле.

Але наступний код повертає false за замовчуванням:

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

Як успішно запросити checked властивість?

3928
23 мая '09 в 18:16 2009-05-23 18:16 заданий Prasad 23 травня '09 о 18:16 2009-05-23 18:16
@ 58 відповідей
  • 1
  • 2

Це спрацювало для мене:

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

Де isAgeSelected - ідентифікатор елемента управління.

Крім того, @ karim79 answer працює нормально. Я не впевнений, що я пропустив в той час, коли я його протестував.

Примітка. Це відповідь використовує Microsoft Ajax, а не jQuery

83
24 мая '09 в 8:30 2009-05-24 08:30 відповідь дан Prasad 24 травня '09 о 8:30 2009-05-24 8:30

Як мені виконати запит на перевірене властивість?

Властивість checked елемента DOM прапорця дасть вам стан checked елемента.

З огляду на ваш існуючий код, ви можете зробити це:

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

Однак є більш красивий спосіб зробити це, використовуючи 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 відповідь дан karim79 23 травня '09 о 18:20 2009-05-23 18:20

Використовувати функцію jQuery is () :

 if($("#isAgeSelected").is(':checked')) $("#txtAge").show(); // checked else $("#txtAge").hide(); // unchecked 
1553
22 июня '11 в 13:14 2011-06-22 13:14 відповідь дан Bhanu Krishnan 22 червня '11 о 13:14 2011-06-22 13:14

Використання 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 

Використання нового методу властивостей:

 if($('#checkMeOut').prop('checked')) { // something when checked } else { // something else when not } 
474
23 июня '11 в 20:29 2011-06-23 20:29 відповідь дан SeanDowney 23 червня '11 о 20:29 2011-06-23 20:29

jQuery 1.6 +

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

jQuery 1.5 і нижче

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

Будь-яка версія jQuery

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

Всі кредити відносяться до Xian .

179
20 мая '14 в 23:03 2014-05-20 23:03 відповідь дан ungalcrys 20 травня '14 о 23:03 2014-05-20 23:03

Я використовую це, і це працює абсолютно нормально:

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

Примітка. Якщо прапорець встановлений, він поверне true в іншому випадку undefined, тому краще перевірте значення "ІСТИНА".

149
19 авг. відповідь дан Pradeep 19 Серпня. 2010-08-19 16:38 '10 о 16:38 2010-08-19 16:38

Використання:

 <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 авг. відповідь дан Lalji Dhameliya 29 Серпня. 2016-08-29 14:38 '16 о 14:38 2016-08-29 14:38

Так як jQuery 1.6, поведінка jQuery.attr() змінилося, і користувачам рекомендується не використовувати його для отримання стану, зазначеного елементом. Замість цього ви повинні використовувати jQuery.prop() :

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

Дві інші можливості:

 $("#txtAge").get(0).checked $("#txtAge").is(":checked") 
106
27 апр. відповідь дан Salman A 27 Квітня. 2012-04-27 14:54 '12 о 14:54 2012-04-27 14:54

Якщо ви використовуєте оновлену версію jquery, ви повинні піти для методу .prop , щоб вирішити вашу проблему:

$('#isAgeSelected').prop('checked') поверне true , якщо зазначено, і false , якщо він не встановлений. Я підтвердив це, і я зіткнувся з цим питанням раніше. $('#isAgeSelected').attr('checked') і $('#isAgeSelected').is('checked') повертає undefined , що не є гідною відповіддю на ситуацію. Зробіть так, як показано нижче.

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

Сподіваюся, що це допоможе :) - Дякую.

80
25 авг. відповідь дан Rajesh Omanakuttan 25 Серпня. 2013-08-25 06:11 '13 в 6:11 2013-08-25 6:11

Використання обробника події Click для властивості checkbox є ненадійним, оскільки властивість checked може змінюватися під час виконання самого обробника подій!

В ідеалі ви хочете помістити свій код в обробник події change , наприклад, він запускається кожного разу при зміні значення прапорця (незалежно від того, як це робиться).

 $('#isAgeSelected').bind('change', function () { if ($(this).is(':checked')) $("#txtAge").show(); else $("#txtAge").hide(); }); 
55
06 окт. відповідь дан arviman 06 Жовтня. 2011-10-06 04:12 '11 в 4:12 2011-10-06 4:12

Я вирішив опублікувати відповідь про те, як зробити те ж саме без jQuery. Просто тому, що я заколотник.

 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; }; 

Спочатку ви отримуєте обидва елементи по їх ідентифікатором. Потім ви призначаєте checkboxe onchange подія функцію, яка перевіряє, чи встановлений прапорець, і відповідним чином встановлює властивість hidden текстового поля віку. У цьому прикладі використовується тернарний оператор.

Ось вам fiddle , щоб перевірити його.

Додавання

Якщо крос-браузерна сумісність є проблемою, я пропоную встановити для властивості CSS display значення none і inline.

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

Більш повільний, але сумісний з крос-браузером.

50
20 марта '12 в 22:19 2012-03-20 22:19 відповідь дан Octavian Damiean 20 березня '12 о 22:19 2012-03-20 22:19

Я думаю, ви могли б зробити це:

 if ($('#isAgeSelected :checked').size() > 0) { $("#txtAge").show(); } else { $("#txtAge").hide(); } 
40
23 мая '09 в 18:34 2009-05-23 18:34 відповідь дан xenon 23 травня '09 о 18:34 2009-05-23 18:34

Існує багато способів перевірити, чи встановлений прапорець:

Спосіб перевірки за допомогою jQuery

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

Перевірте приклад або документ:

38
14 окт. відповідь дан Parth Chavda 14 Жовтня. 2014-10-14 10:48 '14 о 10.48 2014-10-14 10:48

Я зіткнувся з тією ж проблемою. У мене встановлений прапорець ASP.NET

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

У коді jQuery я використовував наступний селектор, щоб перевірити, чи був прапорець встановлений чи ні, і, схоже, він працює як принадність.

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

Я впевнений, що ви також можете використовувати ідентифікатор замість CssClass,

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

Сподіваюся, це допоможе вам.

37
16 дек. відповідь дан Nertim 16 дек. 2010-12-16 21:50 '10 о 21:50 2010-12-16 21:50

Це працює для мене:

  $("#isAgeSelected").click(function(){ $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide(); }); 
35
06 янв. відповідь дан ashish amatya 06 Січня. 2011-01-06 14:33 '11 о 14:33 2011-01-06 14:33

Це інший спосіб зробити те ж саме:

 <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 авг. відповідь дан Sangeet Shah 24 Серпня. 2015-08-24 15:19 '15 о 15:19 2015-08-24 15:19

Мій спосіб зробити це:

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

Ви можете використовувати цей код:

 $('#isAgeSelected').click(function(){ console.log(this.checked); if(this.checked == true) { $("#txtAge").show(); } else { $("#txtAge").hide(); } }); 
30
13 окт. відповідь дан sandeep kumar 13 Жовтня. 2016-10-13 09:03 '16 о 9:03 2016-10-13 9:03
 $(selector).attr('checked') !== undefined 

Повертає true , якщо вхід перевірений і false , якщо це не так.

30
12 февр. відповідь дан fe_lix_ 12 февр. 2012-02-12 18:15 '12 о 18:15 2012-02-12 18:15

Використовуйте це:

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

Якщо прапорець встановлений, довжина більше нуля.

29
27 июля '16 в 12:46 2016-07-27 12:46 відповідь дан Hamid NK 27 липня '16 о 12:46 2016-07-27 12:46

Ви можете використовувати:

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

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

Обидва вони повинні працювати.

28
28 апр. відповідь дан Muhammad Awais 28 Квітня. 2016-04-28 15:07 '16 о 15:07 2016-04-28 15:07

Цей приклад для кнопки.

Спробуйте наступне:

 <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 янв. відповідь дан usayee 03 Січня. 2014-01-03 13:38 '14 о 13:38 2014-01-03 13:38

Головний відповідь не зробив цього для мене. Це сталося, хоча:

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

В основному, коли елемент # li_13 клацнуть, він перевіряє, чи згоден елемент # (який є прапорцем), за допомогою функції .attr('checked') . Якщо це потім fadeIn елемент #saveForm, і якщо не fadeOut елемент saveForm.

23
10 дек. відповідь дан MDMoore313 10 дек. 2012-12-10 08:02 '12 о 8:02 2012-12-10 8:02

1) Якщо ваша розмітка HTML:

 <input type="checkbox" /> 

attr:

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

Якщо використовується prop:

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

2) Якщо ваша розмітка HTML:

  <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:

 $(element).prop("checked") // Will return true whether checked="checked" 
23
30 окт. відповідь дан Somnath Kharat 30 Жовтня. 2013-10-30 15:43 '13 о 15:43 2013-10-30 15:43

Переключити: 0/1 або ще

 <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 янв. відповідь дан user2385302 08 Січня. 2015-01-08 16:10 '15 о 16:10 2015-01-08 16:10

Я використовую це:

  <input type="checkbox" id="isAgeSelected" value="1" /> <br/> <input type="textbox" id="txtAge" /> $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide(); 
19
06 сент. відповідь дан Nishant Kumar 06 сент. 2013-09-06 09:43 '13 в 9:43 2013-09-06 9:43

Хоча ви запропонували рішення JavaScript для своєї проблеми (відображення textbox , коли checkbox є checked ), цю проблему можна вирішити тільки за допомогою css. При такому підході ваша форма працює для користувачів, які відключили JavaScript.

Припускаючи, що у вас є наступний HTML:

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

Ви можете використовувати наступний CSS для досягнення бажаної функціональності:

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

В інших сценаріях ви можете подумати про відповідні селекторах CSS.

Ось скрипт, який демонструє цей підхід .

19
22 авг. відповідь дан Ormoz 22 Серпня. 2015-08-22 22:09 '15 о 22:09 2015-08-22 22:09
 if($("#checkkBoxId").is(':checked')){ alert("Checked=true"); } 

або

 if($("#checkkBoxId").attr('checked') == true){ alert("checked=true"); } 
16
10 июня '13 в 16:12 2013-06-10 16:12 відповідь дан ijarlax 10 червня '13 о 16:12 2013-06-10 16:12

Я впевнений, що це не якесь одкровення, але я не бачив усього цього в одному прикладі:

Селектор для всіх зазначених прапорців (на сторінці):

 $('input[type=checkbox]:checked') 
15
15 нояб. відповідь дан Tsonev 15 нояб. 2013-11-15 13:50 '13 о 13:50 2013-11-15 13:50
  • 1
  • 2

Інші питання по мітках або Задайте питання