Wie kann ich prüfen, ob jQuery aktiviert ist?

Ich muss die checked Flag-Eigenschaft checked und eine Aktion basierend auf der überprüften Eigenschaft mit jQuery ausführen.

Wenn zum Beispiel das Kontrollkästchen Alter markiert ist, muss ich ein Textfeld zur Eingabe des Alters anzeigen. Andernfalls das Textfeld ausblenden.

Der folgende Code gibt jedoch standardmäßig false :

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

Wie kann die checked Eigenschaft erfolgreich abgerufen werden?

3928
23 мая '09 в 18:16 2009-05-23 18:16 Prasad wird am 23. Mai 09 um 18:16 2009-05-23 18:16 gegeben
@ 58 Antworten
  • 1
  • 2

Es hat für mich funktioniert:

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

Dabei ist isAgeSelected die Steuerelement-ID.

Außerdem funktioniert die Antwort von @ karim79 gut. Ich bin mir nicht sicher, was ich vermisst habe, als ich es getestet habe.

Hinweis Diese Antwort verwendet Microsoft Ajax, nicht jQuery.

83
24 мая '09 в 8:30 2009-05-24 08:30 Die Antwort ist gegeben Prasad 24. Mai 09 um 8:30 2009-05-24 08:30

Wie kann ich eine Anfrage für eine verifizierte Eigenschaft ausführen?

Die checked Eigenschaft des DOM-Kontrollkästchenelements gibt den checked Status des Elements an.

In Anbetracht Ihres vorhandenen Codes können Sie Folgendes tun:

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

Es gibt jedoch eine schönere Möglichkeit, dies mithilfe von toggle zu tun:

 <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 Die Antwort gibt karim79 am 23. Mai 09 um 18:20 2009-05-23 18:20

Verwenden Sie die jQuery-Funktion is () :

 if($("#isAgeSelected").is(':checked')) $("#txtAge").show(); // checked else $("#txtAge").hide(); // unchecked 
1553
22 июня '11 в 13:14 2011-06-22 13:14 Die Antwort wird Bhanu Krishnan am 22. Juni um 13:14 Uhr 2011-06-22 13:14 gegeben

JQuery verwenden> 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 

Verwenden der neuen Eigenschaftsmethode:

 if($('#checkMeOut').prop('checked')) { // something when checked } else { // something else when not } 
474
23 июня '11 в 20:29 2011-06-23 20:29 Die Antwort wird von SeanDowney am 23. Juni '11 um 20:29 2011-06-23 20:29 gegeben

jQuery 1.6 +

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

jQuery 1.5 und darunter

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

Jede jQuery-Version

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

Alle Darlehen sind Xian .

179
20 мая '14 в 23:03 2014-05-20 23:03 Die Antwort ist gegeben ungalcrys 20. Mai 14 um 23:03 2014-05-20 23:03

Ich benutze es und es funktioniert absolut gut:

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

Hinweis Wenn diese Option aktiviert ist, wird true zurückgegeben, andernfalls undefiniert. Daher empfiehlt es sich, den Wert TRUE zu überprüfen.

149
19 авг. Die Antwort ist Pradeep 19 aug. 2010-08-19 16:38 '10 um 16:38 2010-08-19 16:38

Verwenden:

 <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 авг. Die Antwort wird Lalji Dhameliya 29 Aug gegeben. 2016-08-29 14:38 '16 am 14:38 2016-08-29 14:38

Seit jQuery 1.6 hat sich das Verhalten von jQuery.attr() geändert, und die Benutzer werden empfohlen, es nicht zum Abrufen des durch ein Element markierten Status zu verwenden. Verwenden jQuery.prop() stattdessen jQuery.prop() :

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

Zwei weitere Funktionen:

 $("#txtAge").get(0).checked $("#txtAge").is(":checked") 
106
27 апр. Die Antwort wird von Salman A 27 April gegeben. 2012-04-27 14:54 '12 um 14:54 Uhr 2012-04-27 14:54

Wenn Sie eine aktualisierte Version von Jquery verwenden, sollten Sie sich für die .prop Methode entscheiden, um Ihr Problem zu lösen:

$('#isAgeSelected').prop('checked') gibt true zurück true wenn es markiert ist, und false wenn nicht gesetzt. Ich habe das bestätigt und bin früher auf dieses Thema gestoßen. $('#isAgeSelected').attr('checked') und $('#isAgeSelected').is('checked') gibt undefined , was keine gute Antwort auf die Situation ist. Gehen Sie wie unten gezeigt vor.

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

Hoffe das hilft :) - Danke.

80
25 авг. Antwort von Rajesh Omanakuttan 25. August . 2013-08-25 06:11 '13 am 6:11 am 2013-08-25 06:11

Die Verwendung des Click Ereignishandlers für die Checkbox-Eigenschaft ist unzuverlässig, da sich die checked Eigenschaft während der Ausführung des Ereignishandlers selbst ändern kann!

Idealerweise möchten Sie Ihren Code in einen change einfügen. Er wird beispielsweise jedes Mal ausgeführt, wenn sich der Wert des Flags ändert (unabhängig davon, wie er ausgeführt wird).

 $('#isAgeSelected').bind('change', function () { if ($(this).is(':checked')) $("#txtAge").show(); else $("#txtAge").hide(); }); 
55
06 окт. Die Antwort wird am 06. Okt. gegeben . 2011-10-06 04:12 '11 am 4:12 am 2011-10-06 04:12

Ich entschied mich dazu, eine Antwort zu posten, wie man das ohne jQuery macht. Nur weil ich ein Rebell bin.

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

Zuerst erhalten Sie beide Artikel anhand ihrer ID. Anschließend weisen Sie einer Funktion ein Kontrollkästchen onchange Ereignis zu, das überprüft, ob das Kontrollkästchen onchange ist, und die hidden Eigenschaft des Textfelds "Alter" entsprechend festlegen. In diesem Beispiel wird der ternäre Operator verwendet.

Hier haben Sie eine Geige , um es auszuprobieren.

Hinzufügen

Wenn die Kompatibilität mit Browsern problematisch ist, schlage ich vor, die CSS- display auf none und inline einzustellen.

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

>

50
20 марта '12 в 22:19 2012-03-20 22:19 Die Antwort wird von Octavian Damiean am 20. März '12 um 10:19 2012-03-20 22:19 gegeben

Ich denke, du könntest das tun:

 if ($('#isAgeSelected :checked').size() > 0) { $("#txtAge").show(); } else { $("#txtAge").hide(); } 
40
23 мая '09 в 18:34 2009-05-23 18:34 Die Antwort wird gegeben Xenon 23. Mai 09 um 18:34 2009-05-23 18:34

Es gibt viele Möglichkeiten, um zu überprüfen, ob das Kontrollkästchen aktiviert ist:

JQuery-Überprüfungsmethode

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

Überprüfen Sie ein Beispiel oder Dokument:

38
14 окт. Antwort an Parth Chavda vom 14. Oktober. 2014-10-14 10:48 '14 um 10:48 2014-10-14 10:48

Ich bin auf das gleiche Problem gestoßen. Ich habe ASP.NET geprüft

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

In jQuery-Code habe ich mit dem folgenden Selektor geprüft, ob das Flag gesetzt wurde oder nicht, und es sieht so aus, als würde es wie ein Zauber wirken.

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

Ich bin sicher, Sie können auch die ID anstelle der CssClass verwenden.

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

Hoffe das hilft dir.

37
16 дек. Die Antwort ist Nertim 16. Dezember gegeben. 2010-12-16 21:50 '10 um 21:50 2010-12-16 21:50

Es funktioniert für mich:

  $("#isAgeSelected").click(function(){ $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide(); }); 
35
06 янв. die antwort wird ashish amatya 06 jan gegeben. 2011-01-06 14:33 '11 am 14:33 2011-01-06 14:33

Dies ist eine andere Möglichkeit, das Gleiche zu tun:

 <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 авг. Die Antwort ist gegeben von Sangeet Shah 24 Aug. 2015-08-24 15:19 '15 am 15:19 2015-08-24 15:19

Mein Weg dies zu tun ist:

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

Sie können diesen Code verwenden:

 $('#isAgeSelected').click(function(){ console.log(this.checked); if(this.checked == true) { $("#txtAge").show(); } else { $("#txtAge").hide(); } }); 
30
13 окт. Antwort von sandeep kumar 13. Oktober 2016-10-13 09:03 '16 um 9:03 am 2016-10-13 09:03
 $(selector).attr('checked') !== undefined 

Gibt true wenn die Eingabe überprüft wurde, und false wenn dies nicht der true ist.

30
12 февр. Die Antwort ist gegeben fe_lix_ 12 Feb. 2012-02-12 18:15 '12 um 18:15 Uhr 2012-02-12 18:15

Verwenden Sie dies:

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

Wenn aktiviert, ist die Länge größer als Null.

29
27 июля '16 в 12:46 2016-07-27 12:46 Die Antwort wird von Hamid NK am 27. Juli 16 um 12:46 Uhr 2016-07-27 12:46 gegeben

Sie können verwenden:

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

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

Beides sollte funktionieren.

28
28 апр. Die Antwort wird von Muhammad Awais 28. April gegeben 2016-04-28 15:07 '16 am 15:07 2016-04-28 15:07

Dieses Beispiel ist für die Schaltfläche.

Versuchen Sie folgendes:

 <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 янв. Die Antwort wird von Usayee am 03. Januar gegeben 2014-01-03 13:38 '14 um 13:38 2014-01-03 13:38

Die Hauptantwort hat das für mich nicht getan. Dies geschah jedoch:

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

Wenn das Element # li_13 angeklickt wird, wird grundsätzlich geprüft, ob das Element # (das Kontrollkästchen) mit der Funktion .attr('checked') übereinstimmt. Wenn dies das fadeIn-Element #saveForm ist, und wenn nicht das fadeOut-Element saveForm.

23
10 дек. Die Antwort ist MDMoore313 10. Dezember gegeben. 2012-12-10 08:02 '12 am 8:02 2012-12-10 08:02

1) Wenn Ihr HTML-Markup:

 <input type="checkbox" /> 

attr:

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

Wenn Stütze verwendet wird:

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

2) Wenn Ihr HTML-Markup:

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

 $(element).prop("checked") // Will return true whether checked="checked" 
23
30 окт. Antwort Somnath Kharat 30 Okt. 2013-10-30 15:43 13 am 15:43 2013-10-30 15:43

Schalter: 0/1 oder mehr

 <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 янв. Antwort von user2385302 Jan 08 2015-01-08 16:10 '15 am 16:10 2015-01-08 16:10

Ich benutze das:

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

Sie haben zwar eine JavaScript-Lösung für Ihr Problem vorgeschlagen (das textbox angezeigt, wenn das checkbox ist), dieses Problem kann jedoch nur mit Hilfe von css gelöst werden. Mit diesem Ansatz funktioniert Ihr Formular für Benutzer, die JavaScript deaktiviert haben.

Vorausgesetzt, Sie haben folgendes HTML:

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

Sie können das folgende CSS verwenden, um die gewünschte Funktionalität zu erreichen:

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

In anderen Szenarien können Sie über die geeigneten CSS-Selektoren nachdenken.

Hier ist ein Skript, das diesen Ansatz demonstriert .

19
22 авг. Die Antwort gibt Ormoz am 22. August. 2015-08-22 22:09 '15 um 22:09 Uhr 2015-08-22 22:09
 if($("#checkkBoxId").is(':checked')){ alert("Checked=true"); } 

oder

 if($("#checkkBoxId").attr('checked') == true){ alert("checked=true"); } 
16
10 июня '13 в 16:12 2013-06-10 16:12 Die Antwort wird von ijarlax am 10. Juni 13 um 16:12 Uhr 2013-06-10 16:12 gegeben

Ich bin mir sicher, dass dies keine Offenbarung ist, aber ich habe das alles nicht in einem Beispiel gesehen:

Auswahl für alle markierten Kästchen (auf Seite):

 $('input[type=checkbox]:checked') 
15
15 нояб. Die Antwort wird Tsonev 15 November gegeben. 2013-11-15 13:50 '13 am 13:50 2013-11-15 13:50
  • 1
  • 2

Weitere Fragen zu Tags oder Ask a question