Ich möchte so etwas tun, um checkboxmit jQuery ein Häkchen zu setzen :

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

oder

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

Gibt es so etwas?

Moderne jQuery

Verwendung .prop():

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

DOM-API

Wenn Sie nur mit einem Element arbeiten, können Sie jederzeit auf das zugrunde liegende Element zugreifen HTMLInputElementund dessen .checkedEigenschaft ändern :

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

Der Vorteil der Verwendung der Methoden .prop()und .attr()stattdessen besteht darin, dass sie mit allen übereinstimmenden Elementen arbeiten.

jQuery 1.5.x und niedriger

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

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

Beachten Sie, dass dies der Ansatz ist, der von jQuerys Komponententests vor Version 1.6 verwendet wird und der Verwendung vorzuziehen ist, $('.myCheckbox').removeAttr('checked');da letzterer, wenn das Kontrollkästchen ursprünglich aktiviert wurde, das Verhalten eines Aufrufs in einem .reset()beliebigen Formular ändert , das ihn enthält - ein subtiler, aber wahrscheinlich unerwünschte Verhaltensänderung.

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

Verwenden:

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

Und wenn Sie überprüfen möchten, ob ein Kontrollkästchen aktiviert ist oder nicht:

$('.myCheckbox').is(':checked');

Dies ist die richtige Art und Weise zu kontrollieren und Kontrollkästchen mit jQuery unchecking, wie es Cross-Plattform - Standard ist, und wird Form reposts ermöglichen.

$('.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 Checkbox-Elements ordnungsgemäß implementiert, diesen Code fehlerfrei ausführt. Dies sollten alle gängigen Browser sein, aber ich kann vor Internet Explorer 9 keine Tests durchführen.

Das Problem (jQuery 1.6):

Sobald ein Benutzer auf ein Kontrollkästchen klickt, reagiert dieses Kontrollkästchen nicht mehr auf die "aktivierten" Attributänderungen.

Hier ist ein Beispiel für das Kontrollkästchenattribut, das den Job nicht ausführt, nachdem jemand auf das Kontrollkästchen geklickt hat (dies geschieht in Chrome).

Geige

Die Lösung:

Durch die Verwendung der "geprüften" Eigenschaft von JavaScript 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 wollen .

Geige

Dieses Plugin ändert die überprüfte Eigenschaft aller von jQuery ausgewählten Elemente und aktiviert und deaktiviert die Kontrollkästchen unter allen Umständen erfolgreich. Dies scheint zwar eine übermäßige Lösung zu sein, verbessert jedoch die Benutzererfahrung Ihrer Website und hilft, Frustrationen der Benutzer 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 Codefragmente verwenden:

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

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

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

Du kannst tun

$('.myCheckbox').attr('checked',true) //Standards compliant

oder

$("form #mycheckbox").attr('checked', true)

Wenn Sie im onclick-Ereignis benutzerdefinierten Code für das Kontrollkästchen haben, das Sie auslösen möchten, verwenden Sie stattdessen diesen:

$("#mycheckbox").click();

Sie können das Kontrollkästchen deaktivieren, indem Sie das Attribut vollständig entfernen:

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

Sie können alle Kontrollkästchen wie folgt aktivieren:

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});

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

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

Der letzte löst das Klickereignis für das Kontrollkästchen aus, die anderen nicht. Wenn Sie also im onclick-Ereignis benutzerdefinierten Code für das Kontrollkästchen haben, das Sie auslösen möchten, verwenden Sie den letzten.

Um ein Kontrollkästchen zu aktivieren, sollten Sie verwenden

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

oder

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

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

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

Wenn Sie tun

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

Dadurch wird das Attribut insgesamt entfernt, und Sie können das Formular daher nicht zurücksetzen.

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

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

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

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

Es werden alle Elemente ausgewählt, deren Namensattribut ckbItem enthält.

Angenommen, die Frage ist ...

Wie aktiviere ich ein Kontrollkästchen nach Wert?

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

Die Antwort von Xian kann mit der folgenden Codezeile um einen spezifischeren Selektor erweitert werden:

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

Mir fehlt die Lösung. Ich werde immer verwenden:

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

Um ein Kontrollkästchen mit jQuery 1.6 oder höher zu aktivieren, gehen Sie wie folgt vor :

checkbox.prop('checked', true);

Verwenden Sie zum Deaktivieren:

checkbox.prop('checked', false);

Folgendes möchte ich verwenden, um ein Kontrollkästchen mit jQuery umzuschalten:

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

Wenn Sie jQuery 1.5 oder niedriger verwenden:

checkbox.attr('checked', true);

Verwenden Sie zum Deaktivieren:

checkbox.attr('checked', false);

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>

Hier ist der Code zum Aktivieren und Deaktivieren mit einer Schaltfläche:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
        });
        set=unset;
    });
});

Update: Hier ist der gleiche Codeblock mit der neueren Jquery 1.6+ Prop-Methode, die attr ersetzt:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
        });
        set=unset;
    });
});

Versuche dies:

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

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

Wir können elementObjectmit jQuery verwenden, um das Attribut zu überprüfen:

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

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

Update: Jquery 1.6+ hat die neue Requisitenmethode, die attr ersetzt, z.

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

Wenn Sie PhoneGap für die Anwendungsentwicklung verwenden und einen Wert auf der Schaltfläche haben, den Sie sofort anzeigen möchten, denken Sie daran, dies zu tun

$('span.ui-[controlname]',$('[id]')).text("the value");

Ich habe festgestellt, dass die Benutzeroberfläche ohne die Spanne nicht aktualisiert wird, egal was Sie tun.

Hier ist der 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;
        }
    }
});

Eine andere mögliche Lösung:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }

Wie @ livefree75 sagte:

jQuery 1.5.x und niedriger

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 tun:

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

Wenn Sie Mobile verwenden und möchten, dass die Benutzeroberfläche aktualisiert wird und das Kontrollkästchen als deaktiviert angezeigt wird, verwenden Sie Folgendes:

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

Beachten Sie Speicherlecks in Internet Explorer vor Internet Explorer 9 , wie in der jQuery-Dokumentation angegeben :

In Internet Explorer vor Version 9 kann die Verwendung von .prop () zum Festlegen einer DOM-Elementeigenschaft auf einen anderen Wert als einen einfachen Grundwert (Zahl, Zeichenfolge oder Boolescher Wert) 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 Speicherverlust sicher festzulegen.

Für jQuery 1.6+

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

Für jQuery 1.5.x und niedriger

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

Überprüfen,

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

Zum Aktivieren und Deaktivieren

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

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

Dies ist wahrscheinlich die kürzeste und einfachste Lösung:

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

oder

$(".myCheckBox")[0].checked = false;

Noch kürzer wäre:

$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;

Hier ist auch eine jsFiddle .

Einfaches 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 konnte es nicht zum Laufen bringen mit:

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

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

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

Wenn Sie ein Kontrollkästchen wie aktiviert haben;

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

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

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

Insbesondere, wenn Sie das Kontrollkästchen Kontrollkästchen entfernt haben.

Hier ist die vollständige Antwort mit jQuery

Ich teste es und es funktioniert zu 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
    });

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