Wie überprüfe ich, ob ein Kontrollkästchen in jQuery aktiviert ist?
Ich muss die checked -Eigenschaft eines Kontrollkästchens aktivieren und mit jQuery eine auf der checked -Eigenschaft basierende Aktion ausführen.
Wenn beispielsweise das Kontrollkästchen für das Alter aktiviert ist, muss ein Textfeld angezeigt werden, um das Alter einzugeben. Andernfalls wird das Textfeld ausgeblendet.
Der folgende Code gibt jedoch standardmäßig false zurück:
if ($('#isAgeSelected').attr('checked'))
{
$("#txtAge").show();
}
else
{
$("#txtAge").hide();
}<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 selected
</div>Wie kann ich die Eigenschaft checked erfolgreich abfragen?
Das hat bei mir funktioniert:
$get("isAgeSelected ").checked == true
Wobei isAgeSelected die ID des Steuerelements ist.
Auch @ karim79 Antwort funktioniert gut. Ich bin mir nicht sicher, was ich zum Zeitpunkt des Tests verpasst habe.
Hinweis, diese Antwort verwendet Microsoft Ajax, nicht jQuery
Wie frage ich die geprüfte Eigenschaft erfolgreich ab?
Die Eigenschaft checked eines Checkbox-DOM-Elements gibt den Status checked des Elements an.
In Anbetracht Ihres vorhandenen Codes können Sie dies also tun:
if(document.getElementById('isAgeSelected').checked) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
Es gibt jedoch eine viel schönere Möglichkeit, dies mit toggle zu tun:
$('#isAgeSelected').click(function() {
$("#txtAge").toggle(this.checked);
});<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>Verwenden Sie die Funktion is () von jQuery:
if($("#isAgeSelected").is(':checked'))
$("#txtAge").show(); // checked
else
$("#txtAge").hide(); // unchecked
Verwenden von 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
Verwenden der neuen Eigenschaftsmethode:
if($('#checkMeOut').prop('checked')) {
// something when checked
} else {
// something else when not
}
jQuery 1.6 +
$('#isAgeSelected').prop('checked')
jQuery 1.5 und niedriger
$('#isAgeSelected').attr('checked')
Beliebige Version von jQuery
// Assuming an event handler on a checkbox
if (this.checked)
Alle Kredite gehen an Xian .
Ich benutze dies und das funktioniert absolut gut:
$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");
Hinweis: Wenn das Kontrollkästchen aktiviert ist, wird true zurückgegeben, andernfalls undefiniert. Überprüfen Sie daher besser den Wert "TRUE".
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");
}
});
$("#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"> PlannedSeit jQuery 1.6 hat sich das Verhalten von jQuery.attr() geändert, und Benutzer werden aufgefordert, es nicht zum Abrufen des überprüften Zustands eines Elements zu verwenden. Verwenden Sie stattdessen jQuery.prop() :
$("#txtAge").toggle(
$("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
// Return value changes with checkbox state
);
Zwei weitere Möglichkeiten sind:
$("#txtAge").get(0).checked
$("#txtAge").is(":checked")
Wenn Sie eine aktualisierte Version von jquery verwenden, müssen Sie die Methode .prop verwenden, um das Problem zu beheben:
$('#isAgeSelected').prop('checked') gibt true zurück, wenn diese Option aktiviert ist, und false, wenn sie nicht aktiviert ist. Ich habe es bestätigt und bin früher auf dieses Problem gestoßen. $('#isAgeSelected').attr('checked') und $('#isAgeSelected').is('checked') geben undefined zurück, was für die Situation keine angemessene Antwort ist. So machen Sie es wie unten angegeben.
if($('#isAgeSelected').prop('checked')) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
Hoffe es hilft :) - Danke.
Die Verwendung des Ereignishandlers Click für die Checkbox-Eigenschaft ist unzuverlässig, da sich die Eigenschaft checked während der Ausführung des Ereignishandlers selbst ändern kann!
Im Idealfall möchten Sie Ihren Code in eine change -Ereignisbehandlungsroutine einfügen, die jedes Mal ausgelöst wird, wenn der Wert des Kontrollkästchens geändert wird (unabhängig von wie).
$('#isAgeSelected').bind('change', function () {
if ($(this).is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();
});
Verwenden:
<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad
$('input#abc').click(function(){
if($(this).is(':checked'))
{
var checkedOne=$(this).val()
alert(checkedOne);
// Do some other action
}
})
Dies kann hilfreich sein, wenn Sie möchten, dass die erforderliche Aktion nur ausgeführt wird, wenn Sie das Kontrollkästchen aktivieren und nicht zum Zeitpunkt des Deaktivierens des Kontrollkästchens.
Ich habe mich dazu entschlossen, eine Antwort zu schreiben, wie man genau dasselbe ohne jQuery machen kann. 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 Elemente anhand ihrer ID. Anschließend weisen Sie dem Ereignis onchange des Kontrollkästchens eine Funktion zu, die überprüft, ob das Kontrollkästchen aktiviert wurde, und die Eigenschaft hidden des Alterstextfelds entsprechend festlegt. In diesem Beispiel mit dem ternären Operator.
Hier ist eine Geige für Sie, um es zu testen.
Nachtrag
Wenn Cross-Browser-Kompatibilität ein Problem ist, dann schlage ich vor, die CSS display -Eigenschaft auf none und inline zu setzen.
elem.style.display = this.checked ? 'inline' : 'none';
Langsamer, aber browserübergreifend.
Ich glaube, Sie könnten das tun:
if ($('#isAgeSelected :checked').size() > 0)
{
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
Es gibt viele Möglichkeiten zu prüfen, ob ein Kontrollkästchen aktiviert ist oder nicht:
Möglichkeit zur Überprüfung mit jQuery
if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))
Beispiel überprüfen oder auch dokumentieren:
Ich bin genau auf das gleiche Problem gestoßen. Ich habe ein ASP.NET-Kontrollkästchen
<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />
Im jQuery-Code habe ich mit dem folgenden Selektor überprüft, ob das Kontrollkästchen aktiviert ist oder nicht, und es scheint wie ein Zauber zu funktionieren.
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 { ... }
Ich hoffe das hilft dir.
Dies ist eine andere Methode, um dasselbe zu tun:
$(document).ready(function (){
$('#isAgeSelected').click(function() {
// $("#txtAge").toggle(this.checked);
// Using a pure CSS selector
if ($(this.checked)) {
alert('on check 1');
};
// Using jQuery's is() method
if ($(this).is(':checked')) {
alert('on checked 2');
};
// // Using jQuery's filter() method
if ($(this).filter(':checked')) {
alert('on checked 3');
};
});
});<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>Das funktioniert bei mir:
/* isAgeSelected being id for checkbox */
$("#isAgeSelected").click(function(){
$(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
Benutze das:
if ($('input[name="salary_in.Basic"]:checked').length > 0)
Die Länge ist größer als Null, wenn das Kontrollkästchen aktiviert ist.
Sie können diesen Code verwenden:
$('#isAgeSelected').click(function(){
console.log(this.checked);
if(this.checked == true) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
});
Meine Art dies zu tun ist:
if ( $("#checkbox:checked").length ) {
alert("checkbox is checked");
} else {
alert("checkbox is not checked");
}
$(selector).attr('checked') !== undefined
Dies gibt true zurück, wenn die Eingabe markiert ist, und false, wenn dies nicht der Fall ist.
Sie können verwenden:
if(document.getElementById('isAgeSelected').checked)
$("#txtAge").show();
else
$("#txtAge").hide();
if($("#isAgeSelected").is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();
Beide sollten funktionieren.
$(document).ready(function() {
$('#agecheckbox').click(function() {
if($(this).is(":checked"))
{
$('#agetextbox').show();
} else {
$('#agetextbox').hide();
}
});
});
1) Wenn Ihr HTML-Markup lautet:
<input type="checkbox" />
attr verwendet:
$(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 lautet:
<input type="checkbox" checked="checked" />// May be like this also checked="true"
attr verwendet:
$(element).attr("checked") // Will return checked whether it is checked="true"
Stütze verwendet:
$(element).prop("checked") // Will return true whether checked="checked"
Dieses Beispiel ist für die Schaltfläche.
Versuche 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);
}
});
});
Die beste Antwort hat es nicht für mich 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>
Grundsätzlich wird beim Klicken auf das Element # li_13 überprüft, ob das Element # agree (das das Kontrollkästchen ist) mit der Funktion .attr('checked') aktiviert ist. Wenn dies der Fall ist, blenden Sie das Element #saveForm ein und, wenn dies nicht der Fall ist, das Element saveForm aus.
Obwohl Sie eine JavaScript-Lösung für Ihr Problem vorgeschlagen haben (Anzeige von textbox, wenn checkboxchecked ist), kann dieses Problem nur durch CSS gelöst werden . Mit diesem Ansatz funktioniert Ihr Formular für Benutzer, die JavaScript deaktiviert haben.
Angenommen, Sie haben den folgenden HTML-Code:
<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;}
Für andere Szenarien stellen Sie sich möglicherweise geeignete CSS-Selektoren vor.
Ich benutze das:
<input type="checkbox" id="isAgeSelected" value="1" /> <br/>
<input type="textbox" id="txtAge" />
$("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
Toggle: 0/1 oder sonst
<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');
};
});
Ich denke, es wird das einfache sein
$('#isAgeSelected').change(function() {
if($(this).is(":checked")) {
$('#txtAge').show();
}
else{
$('#txtAge').hide();
}
});
Ich bin sicher, es ist keine Offenbarung, aber ich habe nicht alles in einem Beispiel gesehen:
Auswahl für alle markierten Kontrollkästchen (auf der Seite):
$('input[type=checkbox]:checked')
Beziehen Sie jQuery aus dem lokalen Dateisystem ein. Ich habe Googles CDN verwendet, und es gibt auch viele CDNs zur Auswahl.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Der Code wird ausgeführt, sobald ein Kontrollkästchen innerhalb der Klasse mycheck angeklickt wird. Wenn das aktuell angeklickte Kontrollkästchen aktiviert ist, werden alle anderen deaktiviert und das aktuelle aktiviert. Wenn das aktuelle Kontrollkästchen deaktiviert ist, werden alle Kontrollkästchen erneut aktiviert.
<script type="text/javascript">
$(document).ready(function() {
var checkbox_selector = '.mycheck input[type=checkbox]';
$(checkbox_selector).click(function() {
if ($($(this)).is(':checked')) {
// Disable all checkboxes
$(checkbox_selector).attr('disabled', 'disabled');
// Enable current one
$($(this)).removeAttr('disabled');
}
else {
// If unchecked open all checkbox
$(checkbox_selector).removeAttr('disabled');
}
});
});
</script>
Einfaches Formular zum Testen
<form method="post" action="">
<div class="mycheck">
<input type="checkbox" value="1" /> Television
<input type="checkbox" value="2" /> Computer
<input type="checkbox" value="3" /> Laptop
<input type="checkbox" value="4" /> Camera
<input type="checkbox" value="5" /> Music Systems
</div>
</form>
Ausgabebildschirm:
if($("#checkkBoxId").is(':checked')){
alert("Checked=true");
}
oder
if($("#checkkBoxId").attr('checked') == true){
alert("checked=true");
}
Das Attribut checked eines input type="checkbox" wird mit der Eigenschaft defaultChecked zugeordnet, nicht mit der Eigenschaft checked.
Wenn Sie also etwas auf einer Seite tun, während ein Kontrollkästchen deaktiviert ist, verwenden Sie stattdessen die Methode prop(). Es ruft den Eigenschaftswert ab und ändert sich, wenn sich der Status des Kontrollkästchens ändert.
Die Verwendung von attr() oder getAttribute (in reinem JavaScript) ist in diesen Fällen nicht die richtige Vorgehensweise.
wenn elem das betreffende Kontrollkästchen ist, gehen Sie folgendermaßen vor, um den Wert abzurufen:
elem.checked
oder
$(elem).prop('checked')
Ich habe in Firefox 9.0.1 überprüft, dass Folgendes funktioniert, um den Status eines Kontrollkästchens nach einer Änderung zu ermitteln:
$("#mycheckbox").change(function() {
var value = $(this).prop("checked") ? 'true' : 'false';
alert(value);
});
Automatisiert
$(document).ready(function()
{
$('#isAgeSelected').change(function()
{
alert( 'value =' + $('#chkSelect').attr('checked') );
});
});
HTML
<b> <input type="isAgeSelected" id="chkSelect" /> Age Check </b>
<br/><br/>
<input type="button" id="btnCheck" value="check" />
jQuery
$(document).ready(function()
{
$('#btnCheck').click(function()
{
var isChecked = $('#isAgeSelected').attr('checked');
if (isChecked == 'checked')
alert('check-box is checked');
else
alert('check-box is not checked');
})
});
Ajax
function check()
{
if (isAgeSelected())
alert('check-box is checked');
else
alert('check-box is not checked');
}
function isAgeSelected()
{
return ($get("isAgeSelected").checked == true);
}
Dies ist die minimale Menge an Code, die ich brauchte, um so etwas effektiv zu machen. Ich fand diese Methode nützlich; Es wird ein Array der aktivierten Kontrollkästchen zurückgegeben. Anschließend können Sie deren Wert verwenden (diese Lösung verwendet jQuery):
// This is how you get them
var output = "";
var checkedBoxes = $("DivCheckBoxesAreIn").children("input:checked");
if(checkedBoxes.length <= 0) {
alert('Please select check boxes');
return false;
};
// And this is how you use them:
checkedBoxes.each(function() {
output += this.value + ", ";
};
Wenn Sie "Ausgabe" drucken, erhalten Sie eine durch Kommas getrennte Liste Ihrer Werte.
Ich hatte das gleiche Problem und keine der bereitgestellten Lösungen schien zu funktionieren. Dann stellte ich fest, dass ASP.NET das CheckBox-Steuerelement als SPAN mit EINGABE darstellt. Die CheckBox-ID ist also eigentlich eine ID eines SPAN, nicht ein INPUT, so sollten Sie verwenden:
$('#isAgeSelected input')
eher, als
$('#isAgeSelected')
und dann sollten alle oben aufgeführten Methoden funktionieren.
Hier ist ein Beispiel, das enthält: Initialisierung das Anzeigen/Verbergen, um dem Status des Kontrollkästchens zu entsprechen, wenn die Seite geladen wird; unter Berücksichtigung der Tatsache, dass Firefox den Status der Kontrollkästchen speichert, wenn Sie die Seite aktualisieren, aber nicht erinnere mich an den Zustand der angezeigten/ausgeblendeten Elemente.
$(function() {
// initialise visibility when page is loaded
$('tr.invoiceItemRow').toggle($('#showInvoiceItems').attr('checked'));
// attach click handler to checkbox
$('#showInvoiceItems').click(function(){ $('tr.invoiceItemRow').toggle(this.checked);})
});
(mit Hilfe von anderen Antworten auf diese Frage)
Benutze es einfach wie unten
$('#isAgeSelected').change(function() {
if ($(this).is(":checked")) { // or if($("#isAgeSelected").attr('checked') == true){
$('#txtAge').show();
} else {
$('#txtAge').hide();
}
});
Dies war meine Problemumgehung:
$('#vcGoButton').click(function () {
var buttonStatus = $('#vcChangeLocation').prop('checked');
console.log("Status is " + buttonStatus);
if (buttonStatus) {
var address = $('#vcNewLocation').val();
var cabNumber = $('#vcVehicleNumber').val();
$.get('postCabLocation.php',
{address: address, cabNumber: cabNumber},
function(data) {
console.log("Changed vehicle " + cabNumber + " location to " + address );
});
}
else {
console.log("VC go button clicked, but no location action");
}
});
Verwenden:
$(this).toggle($("input:checkbox", $(this))[0].checked);
Denken Sie beim Auswählen außerhalb des Kontexts daran, dass Sie die [0] benötigen, um auf das Kontrollkästchen zuzugreifen.
Verwenden von pure JavaScript:
let checkbox = document.getElementById('checkboxID');
if(checkbox.checked) {
alert('is checked');
} else {
alert('not checked yet');
}
Setter:
$("#chkmyElement")[0].checked = true;
Getter:
if($("#chkmyElement")[0].checked) {
alert("enabled");
} else {
alert("disabled");
}
Ich würde eigentlich das Ereignis change bevorzugen.
$('#isAgeSelected').change(function() {
$("#txtAge").toggle(this.checked);
});
Bitte versuchen Sie den folgenden Code, um zu überprüfen, ob das Kontrollkästchen aktiviert ist oder nicht
$(document).ready(function(){
$("#isAgeSelected").on('change',function(){
if($("#isAgeSelected").is(':checked'))
$("#txtAge").show(); // checked
else{
$("#txtAge").hide(); // unchecked
}
});
});
Versuche dies,
$('#isAgeSelected').click(function() {
if(this.checked){
$("#txtAge").show();
} else{
$("#txtAge").hide();
}
});
Ich verwende jQuery 1.11.1 und hatte Probleme beim Setzen und Lesen des Kontrollkästchenwerts.
Ich habe es endlich durch diese beiden Funktionen gelöst:
function setCheckboxValue(checkBoxId, checked) {
if (checkBoxId && (checked === true || checked === false)) {
var elem = $('#' + checkBoxId);
if (checked === true) {
elem.attr('checked', 'checked');
} else {
elem.removeAttr('checked');
}
}
}
function isChecked(checkBoxId) {
return $('#' + checkBoxId).attr('checked') != null;
}
Es sieht vielleicht etwas schmutzig aus, löst aber alle Probleme mit Kabeln, die ich bei verschiedenen Browsertypen hatte.
Ein Selektor gibt mehrere Objekte zurück und muss das erste Element im Array aufnehmen:
// Collection
var chckremember = $("#chckremember");
// Result boolen
var ischecked=chckremember[0].checked;
if( undefined == $('#isAgeSelected').attr('checked') ) {
$("#txtAge").hide();
} else {
$("#txtAge").show();
}
Sie können diesen Code ausprobieren:
$('#isAgeSelected').click(function(){
console.log(this.checked);
if(this.checked == true) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
});
Was ist mit dieser Lösung?
$("#txtAge")[
$("#isAgeSelected").is(':checked') ?
'show' :
'hide'
]();
Ich muss die Eigenschaft checked eines Kontrollkästchens überprüfen und mit jQuery eine auf der Eigenschaft checked basierende Aktion ausführen.
EX -
1) Beim Laden ausführen, um den Wert des Kontrollkästchens zu erhalten, wenn das Kontrollkästchen für das Alter aktiviert ist. Ich muss ein Textfeld anzeigen, um das Alter einzugeben. Andernfalls wird das Textfeld ausgeblendet.
2) Wenn das Kontrollkästchen für das Alter aktiviert ist, muss ein Textfeld angezeigt werden, um das Alter einzugeben. Andernfalls kann das Textfeld durch Klicken auf das Kontrollkästchen für das Ereignis ausgeblendet werden.
, sodass der Code standardmäßig nicht false zurückgibt:
Versuche Folgendes:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>Jquery Demo</h1>
<input type="checkbox" name="isAge" checked id="isAge"> isAge <br/>
<div id="Age" style="display:none">
<label>Enter your age</label>
<input type="number" name="age">
</div>
<script type="text/javascript">
if(document.getElementById('isAge').checked) {
$('#Age').show();
} else {
$('#Age').hide();
}
$('#isAge').click(function() {
if(document.getElementById('isAge').checked) {
$('#Age').show();
} else {
$('#Age').hide();
}
});
</script>
</body>
</html>
Hier ist eine geänderte Version: https://jsfiddle.net/sedhal/0hygLtrz/7/
Wenn Sie wissen möchten, ob ein Kontrollkästchen in pure javascript aktiviert ist, sollten Sie diesen Code verwenden.
let checkbox =document.getElementById('myCheckboxId');
if(checkbox.checked) {
alert("element is checked");
} else {
alert("element is ot checked");
}
Für ältere Versionen von jQuery musste ich Folgendes verwenden:
$('#change_plan').live('click', function() {
var checked = $('#change_plan').attr('checked');
if(checked) {
//Code
}
else {
//Code
}
});
if( undefined == $('#isAgeSelected').attr('checked') ) {
$("#txtAge").hide();
} else {
$("#txtAge").show();
}
$('#chk').change(function() {
(this.checked)? alert('true') : alert('false');
});
($('#chk')[0].checked)? alert('true') : alert('false');
Falls Sie eine CSS-Klasse als jQuery-Selektor verwenden müssen, können Sie Folgendes tun:
$(document).ready(function () {
$('.myOptionCheckbox').change(function () {
if ($(this).prop('checked') == true) {
console.log("checked");
}
else {
console.log("unchecked");
}
});
});
Es funktioniert auch für checkboxes und radioboxes.
Diese Funktion ist alternativ und stabil:
$('#isAgeSelected').context.checked
(return True/False)
Beispiel:
if($('#isAgeSelected').context.checked){ //if Checkbox is checked then bla bla..
/*.....*/
}else{
/*.....*/
}
In reiner js Checkbox ist der Status leichter zu lesen
isAgeSelected.checked
function check() {
txtAge.style.display= isAgeSelected.checked ? 'block':'none';
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Age <input type="checkbox" id="isAgeSelected"/>
<button onclick="check()">Check</button>
<div id="txtAge" style="display:none">
Age is selected
</div>if($('#isAgeSelected').prop('checked')) {
// do your action
}