Як праверыць, ці ўсталяваны сцяжок у 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 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 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 у 06:11 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 каст. 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; }; 

Спачатку вы атрымліваеце абодва элемента па іх ідэнтыфікатара. Затым вы прызначаеце 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 у 09: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 адказ дадзены Hamid NK 27 ліпеня '16 ў 12:46 2016/07/27 00: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 у 08: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 

Калі выкарыстоўваецца 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 у 09:43 2013/09/06 09: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

Іншыя пытанні па пазнаках або Задайце пытанне