it-swarm.com.de

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?

4308
Prasad

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

92
Prasad

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>
3311
karim79

Verwenden Sie die Funktion is () von jQuery:

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked
1733
Bhanu Krishnan

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
}
530
SeanDowney

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 .

214
ungalcrys

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".

160
Pradeep

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"> Planned
141
Lalji Dhameliya

Seit 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")
114
Salman A

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.

84

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();
});
58
arviman

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.

55
UDB

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.

51

Ich glaube, Sie könnten das tun:

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}
46
xenon

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:

43
Parth Chavda

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.

43
Nertim

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>
41
Sangeet Shah

Das funktioniert bei mir:

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
39
ashish amatya

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.

35
Hamid N K

Sie können diesen Code verwenden:

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});
34
sandeep kumar

Meine Art dies zu tun ist:

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}
32
Dalius I
$(selector).attr('checked') !== undefined

Dies gibt true zurück, wenn die Eingabe markiert ist, und false, wenn dies nicht der Fall ist.

31
fe_lix_

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.

30
Muhammad Awais
$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});
30
Jumper Pot

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"
26
Somnath Kharat

Dieses Beispiel ist für die Schaltfläche.

Versuche Folgendes:

<input type="button" class="check" id="checkall" value="Check All" />  &nbsp; <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
usayee

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.

24
MDMoore313

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.

Hier ist ein Fiddle, um diesen Ansatz zu demonstrieren .

22
Ormoz

Ich benutze das:

 <input type="checkbox" id="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
22
Nishant Kumar

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');
    };
});
21
user2385302

Ich denke, es wird das einfache sein

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});
18
Jitendra Damor

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')
18
Tsonev

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:

Enter image description here

17
Madan Sapkota
if($("#checkkBoxId").is(':checked')){
  alert("Checked=true");
}

oder

if($("#checkkBoxId").attr('checked') == true){
  alert("checked=true");
}
17
ijarlax

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')
15
subham.saha1004

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);
});
15
Joshua Harris

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);
}
14
Khaled.K

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.

13
Daryl H

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.

12
tsw_mik

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)

12
Tim Abell

Benutze es einfach wie unten

 $('#isAgeSelected').change(function() {
     if ($(this).is(":checked")) { // or if($("#isAgeSelected").attr('checked') == true){
         $('#txtAge').show();
     } else {
         $('#txtAge').hide();
     }
 });
11

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");
    }
});
10
cauleyfj

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.

9
Richard Maxwell

Verwenden von pure JavaScript:

let checkbox = document.getElementById('checkboxID');

if(checkbox.checked) {
  alert('is checked');
} else {
  alert('not checked yet');
}
9

Setter:

$("#chkmyElement")[0].checked = true;

Getter:

if($("#chkmyElement")[0].checked) {
   alert("enabled");
} else {
   alert("disabled");
}
9
JJ_Coder4Hire

Ich würde eigentlich das Ereignis change bevorzugen.

$('#isAgeSelected').change(function() {
    $("#txtAge").toggle(this.checked);
});

Demo Fiddle

8
Tarion

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
    }

   });

});
8
Javed Khan

Versuche dies,

$('#isAgeSelected').click(function() {
    if(this.checked){
        $("#txtAge").show();
    } else{
        $("#txtAge").hide();
    } 
});
8
Mohammed Safeer

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.

7
Jacob

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;
7
zamoldar
if( undefined == $('#isAgeSelected').attr('checked') ) {
    $("#txtAge").hide();
} else {
    $("#txtAge").show();
}
6
user1996628

Sie können diesen Code ausprobieren:

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});
5
Praneeth Madush

Was ist mit dieser Lösung?

$("#txtAge")[
    $("#isAgeSelected").is(':checked') ?
    'show' :
    'hide'
]();
4
Iter Ator

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/

3
sedhal soni

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");
}
2
Ir Calif

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       
     }
});
2
Vajira Lasantha
if( undefined == $('#isAgeSelected').attr('checked') ) {
    $("#txtAge").hide();
} else {
    $("#txtAge").show();
}
2
darhamid
$('#chk').change(function() { 
    (this.checked)? alert('true') : alert('false');
});



($('#chk')[0].checked)? alert('true') : alert('false');
1
argie cruz

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.

1
Developer

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{
    /*.....*/
}
1
Ferhat KOÇER

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>
0
if($('#isAgeSelected').prop('checked')) {
    // do your action 
}
0
Vikash