javascript not Setzen eines Kontrollkästchens mit jQuery?




jquery radio checked (24)

Ich konnte es nicht zum Laufen bringen mit:

$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');

Sowohl wahr als auch falsch würde das Kontrollkästchen aktivieren. Was für mich funktioniert hat war:

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking

Ich möchte so etwas tun, um ein checkbox mit jQuery zu aktivieren :

$(".myCheckBox").checked(true);

oder

$(".myCheckBox").selected(true);

Gibt es so etwas?


jQuery 1.6+

Verwenden Sie die neue .prop() -Methode:

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

jQuery 1.5.x und darunter

Die .prop() -Methode ist nicht verfügbar, daher müssen Sie .attr() .

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Beachten Sie, dass dies der Ansatz ist, der von jQuery-Komponententests vor Version 1.6 verwendet wurde

$('.myCheckbox').removeAttr('checked');

Da letzteres das Verhalten eines Aufrufs in .reset() ändert, wenn das Kontrollkästchen anfangs .reset() , wird das .reset() in einem beliebigen Formular geändert. .reset() eine subtile, aber möglicherweise unerwünschte Verhaltensänderung.

Weitere Informationen zu den Änderungen der Behandlung des checked Attributs / der Eigenschaft beim Übergang von 1.5.x auf 1.6 finden Sie in den Versionshinweisen der Version 1.6 und im Abschnitt Attribute vs. Properties des .prop() Dokumentation .

Jede Version von jQuery

Wenn Sie nur mit einem Element arbeiten, können Sie einfach die HTMLInputElement -Eigenschaft des HTMLInputElement .checked :

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

Der Vorteil der Verwendung der .prop() und .attr() ist, dass sie für alle übereinstimmenden Elemente verwendet werden.


Angenommen, die Frage ist ...

Wie überprüfe ich ein Kontrollkästchen BY VALUE?

Denken Sie daran, dass in einem typischen Kontrollkästchensatz alle Eingabe-Tags denselben Namen haben und sich durch den Attributwert unterscheiden : Für jede Eingabe des Satzes gibt es keine ID.

Die Antwort von Xian kann mit einer spezifischeren Auswahl erweitert werden , indem die folgende Codezeile verwendet wird:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);

Für jQuery 1.6+

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

Für jQuery 1.5.x und darunter

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Überprüfen,

$('.myCheckbox').removeAttr('checked');

Wenn Sie ein Kontrollkästchen aktiviert haben;

$('.className').attr('checked', 'checked')

es könnte nicht genug sein. Sie sollten auch die Funktion unten aufrufen.

$('.className').prop('checked', 'true')

Besonders wenn Sie das Kontrollkästchen mit dem Kontrollkästchen entfernt haben.


Hier finden Sie den Code und die Demo zum Aktivieren mehrerer Kontrollkästchen ...

http://jsfiddle.net/tamilmani/z8TTt/

$("#check").on("click", function () {

    var chk = document.getElementById('check').checked;
    var arr = document.getElementsByTagName("input");

    if (chk) {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = true;
        }
    } else {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = false;
        }
    }
});

Hier ist die vollständige Antwort mit jQuery

Ich teste es und es funktioniert 100%: D

    // when the button (select_unit_button) is clicked it returns all the checed checkboxes values 
    $("#select_unit_button").on("click", function(e){

             var arr = [];

             $(':checkbox:checked').each(function(i){
                 arr[i] = $(this).val(); // u can get id or anything else
             });

              //console.log(arr); // u can test it using this in google chrome
    });

Dadurch werden Elemente mit dem angegebenen Attribut mit einem Wert ausgewählt, der den angegebenen Teilstring "ckbItem" enthält:

$('input[name *= ckbItem]').prop('checked', true);

Es werden alle Elemente ausgewählt, die ckbItem in seinem Namensattribut enthalten.


Wenn Sie Mobile verwenden und möchten, dass die Schnittstelle aktualisiert wird und das Kontrollkästchen deaktiviert ist, verwenden Sie Folgendes:

$("#checkbox1").prop('checked', false).checkboxradio("refresh");

Hier ist eine Möglichkeit, dies ohne jQuery zu tun

function addOrAttachListener(el, type, listener, useCapture) {
  if (el.addEventListener) {
    el.addEventListener(type, listener, useCapture);
  } else if (el.attachEvent) {
    el.attachEvent("on" + type, listener);
  }
};

addOrAttachListener(window, "load", function() {
  var cbElem = document.getElementById("cb");
  var rcbElem = document.getElementById("rcb");
  addOrAttachListener(cbElem, "click", function() {
    rcbElem.checked = cbElem.checked;
  }, false);
}, false);
<label>Click Me!
  <input id="cb" type="checkbox" />
</label>
<label>Reflection:
  <input id="rcb" type="checkbox" />
</label>


Sie können das $ .fn-Objekt auch mit neuen Methoden erweitern:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

Dann können Sie einfach folgendes tun:

$(":checkbox").check();
$(":checkbox").uncheck();

Oder Sie möchten ihnen eindeutigere Namen wie mycheck () und myuncheck () geben, falls Sie eine andere Bibliothek verwenden, die diese Namen verwendet.


Normales JavaScript ist sehr einfach und viel weniger Aufwand:

var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
    elements[i].checked = true;
}

Beispiel hier


Ich vermisse die Lösung. Ich werde immer verwenden:

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}

$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

Der letzte wird das Klickereignis für das Kontrollkästchen auslösen, die anderen nicht. Wenn Sie also im Onclick-Ereignis benutzerdefinierten Code für das Ankreuzfeld haben, das Sie auslösen möchten, verwenden Sie das letzte.


In jQuery

if($("#checkboxId").is(':checked')){
    alert("Checked");
}

oder

if($("#checkboxId").attr('checked')==true){
    alert("Checked");
}

In JavaScript

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}

Überprüfen und deaktivieren

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

Beachten Sie die Speicherverluste in Internet Explorer vor Internet Explorer 9 , da in der api.jquery.com/prop :

In Internet Explorer vor Version 9 kann die Verwendung von .prop () zum Festlegen einer DOM-Elementeigenschaft auf einen anderen einfachen Wert (number, string oder boolean) zu Speicherverlusten führen, wenn die Eigenschaft nicht entfernt wird (mithilfe von .removeProp ( )) bevor das DOM-Element aus dem Dokument entfernt wird. Verwenden Sie .data (), um Werte für DOM-Objekte ohne Speicherverluste sicher festzulegen.


Als @ livefree75 sagte:

jQuery 1.5.x und darunter

Sie können das $ .fn-Objekt auch mit neuen Methoden erweitern:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

In neuen Versionen von jQuery müssen wir jedoch Folgendes verwenden:

jQuery 1.6+

    (function($)  {
       $.fn.extend({
          check : function()  {
             return this.filter(":radio, :checkbox").prop("checked", true);
          },
          uncheck : function()  {
             return this.filter(":radio, :checkbox").prop("checked",false);
          }
       });
    }(jQuery));

Dann können Sie einfach folgendes tun:

    $(":checkbox").check();
    $(":checkbox").uncheck();

Wir können elementObject mit jQuery verwenden, um das Attribut zu prüfen:

$(objectElement).attr('checked');

Wir können dies für alle jQuery-Versionen ohne Fehler verwenden.

Update: Jquery 1.6+ hat die neue prop-Methode, die attr ersetzt, zB:

$(objectElement).prop('checked');

$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});

Dies ist die korrekte Methode zum Aktivieren und Deaktivieren von Ankreuzfeldern mit jQuery, da dies plattformübergreifend ist und das erneute Formularen von Formularen zulässt.

$('.myCheckBox').each(function(){ this.checked = true; });

$('.myCheckBox').each(function(){ this.checked = false; });

Auf diese Weise verwenden Sie JavaScript-Standards zum Aktivieren und Deaktivieren von Kontrollkästchen, sodass jeder Browser, der die Eigenschaft "checked" des Kontrollkästchenelements ordnungsgemäß implementiert, diesen Code fehlerfrei ausführt. Dies sollten alle gängigen Browser sein, ich kann jedoch nicht vor Internet Explorer 9 testen.

Das Problem (jQuery 1.6):

Wenn ein Benutzer auf ein Kontrollkästchen klickt, reagiert das Kontrollkästchen nicht mehr auf die Attributänderungen "aktiviert".

Hier ein Beispiel für ein Kontrollkästchen-Attribut, das den Job nicht ausführt, nachdem jemand das Kontrollkästchen aktiviert hat (dies geschieht in Chrome).

Fiddle

Die Lösung:

Durch die Verwendung der JavaScript-Eigenschaft "checked" für die DOM Elemente können wir das Problem direkt lösen, anstatt zu versuchen, das DOM so zu manipulieren, dass es das tut, was wir möchten .

Fiddle

Dieses Plugin ändert die geprüfte Eigenschaft aller von jQuery ausgewählten Elemente und aktiviert und deaktiviert unter allen Umständen die Kontrollkästchen. Auch wenn dies wie eine übertriebene Lösung erscheint, verbessert dies die Benutzererfahrung Ihrer Website und trägt dazu bei, Benutzerfrust zu vermeiden.

(function( $ ) {
    $.fn.checked = function(value) {
        if(value === true || value === false) {
            // Set the value of the checkbox
            $(this).each(function(){ this.checked = value; });
        } 
        else if(value === undefined || value === 'toggle') {
            // Toggle the checkbox
            $(this).each(function(){ this.checked = !this.checked; });
        }

        return this;
    };
})( jQuery );

Wenn Sie kein Plugin verwenden möchten, können Sie alternativ die folgenden Code-Snippets verwenden:

// Check
$(':checkbox').prop('checked', true);

// Un-check
$(':checkbox').prop('checked', false);

// Toggle
$(':checkbox').prop('checked', function (i, value) {
    return !value;
});

Um ein Kontrollkästchen zu aktivieren, sollten Sie verwenden

 $('.myCheckbox').attr('checked',true);

oder

 $('.myCheckbox').attr('checked','checked');

Um ein Kontrollkästchen zu deaktivieren, sollten Sie es immer auf false setzen:

 $('.myCheckbox').attr('checked',false);

Wenn Sie tun

  $('.myCheckbox').removeAttr('checked')

Es entfernt das Attribut alle zusammen und daher können Sie das Formular nicht zurücksetzen.

BAD DEMO jQuery 1.6 . Ich denke das ist kaputt. Für 1.6 werde ich einen neuen Beitrag dazu schreiben.

NEUE WORKING-DEMO jQuery 1.5.2 funktioniert in Chrome.

Beide Demos verwenden

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});

Um ein Kontrollkästchen mit jQuery 1.6 oder höher zu aktivieren, führen Sie einfach Folgendes aus:

checkbox.prop('checked', true);

Um die Auswahl aufzuheben, verwenden Sie:

checkbox.prop('checked', false);

Ich mag es, ein Kontrollkästchen mit jQuery umzuschalten:

checkbox.prop('checked', !checkbox.prop('checked'));

Wenn Sie jQuery 1.5 oder niedriger verwenden:

checkbox.attr('checked', true);

Um die Auswahl aufzuheben, verwenden Sie:

checkbox.attr('checked', false);

Versuche dies:

$('#checkboxid').get(0).checked = true;  //For checking

$('#checkboxid').get(0).checked = false; //For unchecking




checked