mark - set checkbox via jquery




Wie kann ich prüfen, ob in jQuery ein Kontrollkästchen aktiviert ist? (20)

Ich muss die checked Eigenschaft eines Kontrollkästchens überprüfen und mit jQuery eine auf der geprüften Eigenschaft basierende Aktion ausführen.

Wenn zum Beispiel das Kontrollkästchen Alter markiert ist, muss ich ein Textfeld anzeigen, um das Alter einzugeben, oder das Textfeld ausblenden.

Der folgende Code gibt jedoch standardmäßig false :

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

Wie frage ich die checked Eigenschaft erfolgreich ab?


Wie frage ich die geprüfte Eigenschaft erfolgreich ab?

Die checked Eigenschaft eines Checkbox-DOM-Elements gibt den checked Status des Elements an.

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

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

Es gibt jedoch eine viel schönere Möglichkeit, dies mithilfe von 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>


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.


Das funktioniert für mich:

/* isAgeSelected being id for checkbox */

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

Das hat für mich funktioniert:

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

Wobei isAgeSelected die ID des Steuerelements ist.

Auch die answer @karim79 funktioniert einwandfrei. Ich bin mir nicht sicher, was ich vermisst habe, als ich es getestet habe.

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


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, der beispielsweise bei jeder change des Kontrollkästchens ausgelöst wird (unabhängig davon, wie er ausgeführt wird).

$('#isAgeSelected').bind('change', function () {

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#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>


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

Prüfen Sie das Beispiel oder auch das Dokument:


Ich benutze das und das funktioniert absolut in Ordnung:

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

Hinweis: Wenn das Kontrollkästchen aktiviert ist, wird true zurückgegeben, andernfalls undefined. Überprüfen Sie daher den Wert "TRUE".


Ich beschloss, eine Antwort zu posten, wie genau dasselbe ohne jQuery zu tun ist. 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. Dann weisen Sie dem onchange Ereignis des onchange eine Funktion zu, die prüft, ob das Kontrollkästchen onchange , und die hidden Eigenschaft des Textfelds "Alter" entsprechend setzt. In diesem Beispiel mit dem ternären Operator.

Hier ist eine fiddle um es zu testen.

Nachtrag

Wenn Cross-Browser-Kompatibilität ein Problem ist, schlage ich vor, die CSS- display auf Keine und Inline festzulegen .

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

Langsamer, aber Cross-Browser-kompatibel.


Ich denke es wird der einfache sein

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

Ich habe genau das gleiche Problem gefunden. 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 ist oder nicht, und es scheint, als ob es ein Zauber wäre.

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.


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
}

Seit jQuery 1.6 hat sich das Verhalten von jQuery.attr() geändert, und die Benutzer werden aufgefordert, es nicht zum Abrufen des geprüften Status eines Elements 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 Möglichkeiten sind:

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

Sie haben zwar eine JavaScript-Lösung für Ihr Problem vorgeschlagen (Anzeige eines textbox wenn ein checkbox ist), dieses Problem könnte jedoch nur durch css gelöst werden . Mit diesem Ansatz funktioniert Ihr Formular für Benutzer, die JavaScript deaktiviert haben.

Vorausgesetzt, 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 können Sie sich geeignete CSS-Selektoren vorstellen.

Hier ist eine Geige, um diesen Ansatz zu demonstrieren .


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.


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

Wenn Sie eine aktualisierte Version von Jquery verwenden, müssen Sie sich für die .prop Methode entscheiden, um Ihr Problem zu beheben:

$('#isAgeSelected').prop('checked') gibt true wenn es $('#isAgeSelected').prop('checked') und false wenn es nicht markiert ist. Ich habe es bestätigt und bin früher auf dieses Problem gestoßen. $('#isAgeSelected').attr('checked') und $('#isAgeSelected').is('checked') gibt undefined was für die Situation keine $('#isAgeSelected').is('checked') Antwort ist. Also wie unten angegeben.

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

Hoffe, es hilft:) - Danke.


1) Wenn Ihr HTML-Markup lautet:

<input type="checkbox"  />

verwendetes 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 Folgendes ist:

 <input type="checkbox"  checked="checked" />// May be like this also  checked="true"

verwendetes attr:

$(element).attr("checked") // Will return checked whether it is checked="true"

Prop verwendet:

$(element).prop("checked") // Will return true whether checked="checked"

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

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

Dies gibt true zurück true wenn die Eingabe geprüft wird, und false wenn dies nicht der true ist.





checkbox