javascript - change - jquery checkbox value



Überprüfen Sie, ob das Kontrollkästchen mit jQuery aktiviert ist (13)

Das wichtigste zu beachtende Konzept für das checked-Attribut ist, dass es nicht der checked-Eigenschaft entspricht. Das Attribut entspricht der defaultChecked-Eigenschaft und sollte nur zum Festlegen des Anfangswerts des Kontrollkästchens verwendet werden. Der Wert des geprüften Attributs ändert sich nicht mit dem Status des Kontrollkästchens, während die Eigenschaft checked dies tut. Daher ist die browserübergreifende Methode zum Bestimmen, ob ein Kontrollkästchen aktiviert ist, die Verwendung der Eigenschaft

Alle folgenden Methoden sind möglich

elem.checked 

$(elem).prop("checked") 

$(elem).is(":checked") 

https://ffff65535.com

Wie kann ich überprüfen, ob eine Checkbox in einem Checkbox-Array mit der ID des Checkbox-Arrays überprüft wird?

Ich benutze den folgenden Code, aber es gibt immer die Anzahl der Checkboxes unabhängig von der ID zurück.

function isCheckedById(id) {
  alert(id);
  var checked = $("input[@id=" + id + "]:checked").length;
  alert(checked);

  if (checked == 0) {
    return false;
  } else {
    return true;
  }
}

Alle folgenden Methoden sind nützlich:

$('#checkbox').is(":checked")

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

$('#checkbox')[0].checked

$('#checkbox').get(0).checked

Es wird empfohlen, DOMelement oder Inline "this.checked" zu vermeiden, stattdessen sollte jQuery on method als Event Listener verwendet werden.


Du kannst es einfach so machen;

Arbeitsgeige

HTML

<input id="checkbox" type="checkbox" />

jQuery

$(document).ready(function () {
    var ckbox = $('#checkbox');

    $('input').on('click',function () {
        if (ckbox.is(':checked')) {
            alert('You have Checked it');
        } else {
            alert('You Un-Checked it');
        }
    });
});

oder noch einfacher;

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

Wenn das checkbox ist, wird true andernfalls undefined


Einfache Demo zum Überprüfen und Setzen eines Kontrollkästchens.

jsfiddle !

$('.attr-value-name').click(function() {
    if($(this).parent().find('input[type="checkbox"]').is(':checked'))
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', false);
    }
    else
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', true);
    }
});

Gemäß der jQuery- documentation gibt es folgende Möglichkeiten zu prüfen, ob ein Kontrollkästchen aktiviert ist oder nicht. Betrachten jsfiddle zum Beispiel eine Checkbox (Check Working jsfiddle mit allen Beispielen)

<input type="checkbox" name="mycheckbox" id="mycheckbox" />
<br><br>
<input type="button" id="test-with-checked" value="Test with checked" />
<input type="button" id="test-with-is" value="Test with is" />
<input type="button" id="test-with-prop" value="Test with prop" />

Beispiel 1 - Mit geprüft

$("#test-with-checked").on("click", function(){
    if(mycheckbox.checked) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Beispiel 2 - Mit jQuery ist, HINWEIS -: markiert

var check;
$("#test-with-is").on("click", function(){
    check = $("#mycheckbox").is(":checked");
    if(check) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Beispiel 3 - Mit jQuery prop

var check;
$("#test-with-prop").on("click", function(){
    check = $("#mycheckbox").prop("checked");
    if(check) {
         alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

Überprüfen Sie Working jsfiddle


IDs müssen in Ihrem Dokument eindeutig sein, was bedeutet, dass Sie dies nicht tun sollten :

<input type="checkbox" name="chk[]" id="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />

Werfen Sie stattdessen die ID auf und wählen Sie sie dann anhand ihres Namens oder eines übergeordneten Elements aus:

<fieldset id="checkArray">
    <input type="checkbox" name="chk[]" value="Apples" />

    <input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>

Und jetzt die jQuery:

var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0;
//there should be no space between identifier and selector

// or, without the container:

var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;

Laut jsperf.com sind die DOM-Operationen am schnellsten, dann $ (). Prop () gefolgt von $ (). jsperf.com () !!

Hier sind die Syntaxen:

var checkbox = $('#'+id);
/* OR var checkbox = $("input[name=checkbox1]"); whichever is best */

/* The DOM way - The fastest */
if(checkbox[0].checked == true)
   alert('Checkbox is checked!!');

/* Using jQuery .prop() - The second fastest */
if(checkbox.prop('checked') == true)
   alert('Checkbox is checked!!');

/* Using jQuery .is() - The slowest in the lot */
if(checkbox.is(':checked') == true)
   alert('Checkbox is checked!!');

Ich persönlich bevorzuge .prop() . Anders als .is() kann es auch verwendet werden, um den Wert festzulegen.


Mit diesem Code können Sie überprüfen, ob mindestens ein Kontrollkästchen in verschiedenen Kontrollkästchengruppen oder aus mehreren Kontrollkästchen aktiviert ist. Damit können Sie nicht verlangen, IDs oder dynamische IDs zu entfernen. Dieser Code funktioniert mit den gleichen IDs.

Referenzlink

<label class="control-label col-sm-4">Check Box 2</label>
    <input type="checkbox" name="checkbox2" id="checkbox21" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox22" value=ck2 /> ck2<br />

<label class="control-label col-sm-4">Check Box 3</label>
    <input type="checkbox" name="checkbox3" id="checkbox31" value=ck3 /> ck3<br />
    <input type="checkbox" name="checkbox3" id="checkbox32" value=ck4 /> ck4<br />

<script>
function checkFormData() {
    if (!$('input[name=checkbox2]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
        return false;
    }
    if (!$('input[name=checkbox3]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
        return false;
    }
    alert("Success");
    return true;
}
</script>

Sie können diesen Code verwenden,

if($("#checkboxId").is(':checked')){
     // Code in the case checkbox is checked.
} else {
     // Code in the case checkbox is NOT checked.
}

Sie können einen der folgenden empfohlenen Codes von jquery verwenden.

if ( elem.checked ) {};
if ( $( elem ).prop( "checked" ) ) {};
if ( $( elem ).is( ":checked" ) ) {};

Um nur zu sagen, in meinem Beispiel war die Situation ein Dialogfeld, das dann das Kontrollkästchen vor dem Schließen des Dialogs verifiziert hat. Keine von oben und Wie überprüft man, ob ein Kontrollkästchen in jQuery aktiviert ist? und jQuery, wenn das Kontrollkästchen aktiviert ist, scheint auch nicht zu funktionieren.

Schlussendlich

<input class="cb" id="rd" type="checkbox">
<input class="cb" id="fd" type="checkbox">

var fd=$('.cb#fd').is(':checked');
var rd= $('.cb#rd').is(':checked');

Dies funktionierte so, dass die Klasse dann die ID anruft. anstatt nur die ID. Dies liegt möglicherweise an den verschachtelten DOM-Elementen auf dieser Seite, die das Problem verursachen. Die Problemumgehung war oben.


jQuery-Code, um zu prüfen, ob das Kontrollkästchen aktiviert ist oder nicht:

if($('input[name="checkBoxName"]').is(':checked'))
{
  // checked
}else
{
 // unchecked
}

Alternative:

if($('input[name="checkBoxName"]:checked'))
{
    // checked
}else{
  // unchecked
}

$('#checkbox').is(':checked'); 

Der obige Code gibt true zurück, wenn das Kontrollkästchen aktiviert ist, oder false, wenn dies nicht der Fall ist.





checkbox