Wie überprüfe ich, ob in jQuery ein Kontrollkästchen aktiviert ist?

Ich muss die checkedEigenschaft eines Kontrollkästchens aktivieren und eine Aktion basierend auf der überprüften Eigenschaft mit jQuery ausführen.

Wenn beispielsweise das Kontrollkästchen Alter aktiviert ist, muss ein Textfeld angezeigt werden, um das Alter einzugeben. Andernfalls wird das Textfeld ausgeblendet.

Der folgende Code falsewird jedoch standardmäßig zurückgegeben:

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 checkedEigenschaft erfolgreich abfragen ?

Wie kann ich die überprüfte Eigenschaft erfolgreich abfragen?

Die checkedEigenschaft eines Kontrollkästchen-DOM-Elements gibt den checkedStatus des Elements an.

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

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

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

$('#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 is () -Funktion 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 Gutschriften 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"> Planned

Seit jQuery 1.6 hat sich das Verhalten von jQuery.attr()geändert, und Benutzer werden aufgefordert, es nicht zum Abrufen des überprüften Status eines Elements zu verwenden. Stattdessen sollten Sie Folgendes verwenden 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")

Das hat bei mir funktioniert:

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

Wo isAgeSelectedist die ID der Steuerung?

Auch die Antwort von @ karim79 funktioniert einwandfrei . Ich bin mir nicht sicher, was ich zum Zeitpunkt des Tests verpasst habe.

Beachten Sie, dass diese Antwort Microsoft Ajax und nicht jQuery verwendet

Wenn Sie eine aktualisierte Version von jquery verwenden, müssen Sie eine .propMethode auswählen, um Ihr Problem zu beheben:

$('#isAgeSelected').prop('checked')wird zurückgegeben, truewenn aktiviert und falsedeaktiviert. Ich habe es bestätigt und bin früher auf dieses Problem gestoßen. $('#isAgeSelected').attr('checked')und $('#isAgeSelected').is('checked')kehrt zurück, undefinedwas für die Situation keine würdige Antwort ist. Gehen Sie also wie unten angegeben vor.

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

Hoffe es hilft :) - Danke.

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

Im Idealfall möchten Sie Ihren Code in einen changeEreignishandler einfügen , der jedes Mal ausgelöst wird, wenn der Wert des Kontrollkästchens geändert wird (unabhängig davon, wie er ausgeführt wird).

$('#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 werden muss, wenn Sie das Kontrollkästchen nicht zum Zeitpunkt des Entfernens des Kontrollkästchens aktivieren.

Ich habe beschlossen, eine Antwort zu veröffentlichen, wie man genau dasselbe 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 Elemente anhand ihrer ID. Anschließend weisen Sie dem onchangeEreignis des Kontrollkästchens eine Funktion zu, die prüft, ob das Kontrollkästchen aktiviert wurde, und die hiddenEigenschaft des Alterstextfelds entsprechend festlegt . In diesem Beispiel mit dem ternären Operator.

Hier ist eine Geige, mit der Sie sie testen können.

Nachtrag

Wenn die browserübergreifende Kompatibilität ein Problem darstellt, schlage ich vor, die CSS- displayEigenschaft auf none und inline zu setzen .

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

Langsamer, aber browserübergreifend kompatibel.

Ich glaube, Sie könnten dies tun:

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

Ich bin auf genau 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 den folgenden Selektor verwendet, um zu überprüfen, ob das Kontrollkästchen aktiviert wurde 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.

Es gibt viele Möglichkeiten zu überprü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 prüfen oder auch dokumentieren:

• http://api.jquery.com/attr/

• http://api.jquery.com/prop/

Dieser Code wird Ihnen helfen

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

Das funktioniert bei mir:

/* isAgeSelected being id for checkbox */

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

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>

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.

Meine Vorgehensweise ist:

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}

$(selector).attr('checked') !== undefined

Dies wird zurückgegeben, truewenn die Eingabe aktiviert ist und falsenicht.

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

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.

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"

Verwendete Requisite:

$(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" />  &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);
    }
});
});

Die Top-Antwort hat es nicht für mich getan. Dies tat 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 mithilfe der .attr('checked')Funktion geprüft, ob das Element # zustimmen (das Kontrollkästchen) aktiviert ist . Wenn dies der Fall ist, wird das Element #saveForm eingeblendet, und wenn nicht, wird das Element saveForm ausgeblendet.

Ich benutze dies:

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

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

Obwohl Sie eine JavaScript-Lösung für Ihr Problem vorgeschlagen haben (Anzeigen von a, textboxwenn a checkboxist checked), 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;}

In anderen Szenarien können Sie sich geeignete CSS-Selektoren vorstellen.

Hier ist eine Geige, um diesen Ansatz zu demonstrieren .

Umschalten: 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 die einfache sein

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