Как да проверя дали jQuery е проверен?

Трябва да проверя свойствата на checked флаг и да изпълнявам действие, основано на провереното свойство, използвайки jQuery.

Например, ако е поставена отметка за възраст, трябва да покажа текстово поле за въвеждане на възрастта, в противен случай да скрия текстовото поле.

Но следният код по подразбиране връща false :

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

Как да извлечем успешно checked свойство?

3928
23 мая '09 в 18:16 2009-05-23 18:16 Прасад е даден на 23 май 09 в 18:16 2009-05-23 18:16
@ 58 отговора
  • 1
  • 2

Работи за мен:

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

Където isAgeSelected е контролният идентификатор.

Освен това @ karim79 отговорът работи добре. Не съм сигурен какво съм пропуснал, когато го тествах.

Забележка. Този отговор използва Microsoft Ajax, а не jQuery.

83
24 мая '09 в 8:30 2009-05-24 08:30 отговорът е даден Prasad 24 май'09 в 8:30 2009-05-24 08: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 е () :

 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.

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 апр. отговорът е даден от Салман А 27 април. 2012-04-27 14:54 '12 в 2:54 pm 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 am 2013-08-25 06:11

Използването на манипулатор на събитие Click за свойство checkbox е ненадеждно, тъй като checked свойство може да се промени, докато се изпълнява самият събитието!

В идеалния случай искате да поставите кода си в манипулатор за change събития, например, той се изпълнява всеки път, когато стойността на флага се променя (без значение как се прави).

 $('#isAgeSelected').bind('change', function () { if ($(this).is(':checked')) $("#txtAge").show(); else $("#txtAge").hide(); }); 
55
06 окт. отговорът е даден arviman 06 oct. 2011-10-06 04:12 '11 в 4:12 часа на 2011-10-06 04: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; }; 

Първо получавате и двата елемента по техния идентификатор. След това присвоявате събитие с отметка в onchange на функция, която проверява дали е поставена отметката и съответно зададете hidden свойство на текстовото поле на възрастта. Този пример използва троичния оператор.

Тук имате цигулка да го проверите.

допълнение

Ако съвместимостта между браузърите е проблем, предлагам да зададете свойството на CSS display да не е вградено.

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

По-бавен, но съвместим с различни браузъри.

50
20 марта '12 в 22:19 2012-03-20 22:19 Отговорът е даден от Октавиан Дамиан на 20 март '12 в 10: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 отговорът е даден ксенон 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 янв. отговорът е даден ашиш аматя 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 Шах 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 февр. Отговорът е даден на Далиус I 06 февруари. 2012-02-06 17:31 '12 в 5:31 pm 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 09: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 отговорът е даден от Хамид НК на 27 юли в 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 апр. Отговорът е даден от Мохамед Авайс на 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 Jan 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 08:02

1) Ако вашата HTML маркировка:

 <input type="checkbox" /> 

ATTR:

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

Ако се използва опора:

 $(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" 

Използвани опори:

 $(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 Jan 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 Sep 06 2013-09-06 09:43 '13 в 9:43 2013-09-06 09:43

Въпреки, че сте предложили решение на JavaScript за проблема си ( textbox показва, когато е поставена 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 нояб. Отговорът е даден Цонев 15 ноември. 2013-11-15 13:50 '13 в 13:50 2013-11-15 13:50
  • 1
  • 2

Други въпроси за тагове или Задайте въпрос