Einstellung „geprüft“ für eine Checkbox mit jQuery?

Question

Ich mag so etwas tun, um ein checkbox ticken mit jQuery :

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

oder

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

Gibt es so etwas gibt?

Answer 1

jQuery 1.6 +

Mit dem neuen .prop() Methode:

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

jQuery 1.5.x und unter

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

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

Beachten Sie, dass dies der Ansatz von jQuery-Unit-Tests vor Version 1.6 und ist bevorzugt mit

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

da letztere, wenn die Box zunächst geprüft wurde, ändern Sie das Verhalten eines Anrufs auf .reset() auf jede Form, die es enthält -. eine subtile, aber wahrscheinlich nicht erwünscht Verhaltensänderung

Für mehr Kontext, einige unvollständige Diskussion über die Änderungen an der Handhabung des checked Attribut / Eigenschaft im Übergang von 1.5.x auf 1.6 kann in der Version 1.6 Release Notes und der Attribute vs. Eigenschaften der .prop() Dokumentation

Jede Version von jQuery

Wenn Sie mit nur einem Element arbeiten, können Sie immer ändern Sie einfach die HTMLInputElement 's .checked Eigenschaft:

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

Der Vorteil der .prop() und .attr() Methoden statt diese zu verwenden ist, dass sie auf allen abgestimmten Elementen betrieben werden kann.

Answer 2

Verwendung:

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

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

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

Answer 3

Dies ist die richtige Art und Weise zu kontrollieren und Entfernen des Häkchens Kontrollkästchen mit jQuery, wie es Cross-Plattform-Standard ist, und wird erlauben Form reposts.

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

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

Diese Dadurch, verwenden Sie JavaScript Standards für die Überprüfung und Entfernen des Häkchens Kontrollkästchen, so dass jeder Browser, der die „geprüft“ Eigenschaft der Checkbox Element richtig implementiert wird diesen Code einwandfrei laufen. Diese sollte alle gängigen Browser, aber ich bin nicht in der Lage zu Internet Explorer 9 zurück zum vorherigen zu testen.

Das Problem (jQuery 1.6):

Sobald ein Benutzer auf ein Kontrollkästchen klickt, dass Checkbox der „geprüft“ reagiert Änderungen zuzuschreiben.

Hier ist ein Beispiel für das Kontrollkästchen Attribut andernfalls die Arbeit zu tun, nachdem jemand hat geklickt die Checkbox (dies geschieht in Chrome).

Fiddle

Die Lösung:

Mit dem von JavaScript „aktiviert“ Eigenschaft auf der DOM Elemente verwenden, sind wir in der Lage, das Problem direkt zu lösen, statt versuchen, das DOM zu tun zu manipulieren, was wir wollen , es zu tun.

Fiddle

Dieses Plugin wird die geprüfte Eigenschaft aller Elemente ausgewählt von jQuery und erfolgreich überprüfen und deaktivieren Sie Kontrollkästchen unter allen Umständen ändern. Also, während dies wie eine übertragende Lösung zu sein scheint, wird es Ihre Website User Experience besser machen, und hilft, die Frustration der Nutzer zu verhindern.

(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 );

Alternativ, wenn Sie ein Plugin nicht verwenden möchten, können Sie den folgenden Code-Schnipsel verwenden:

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

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

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

Answer 4

Sie können tun,

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

oder

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

Wenn Sie benutzerdefinierten Code in dem Onclick-Ereignisse für das Kontrollkästchen, die Sie schießen wollen, benutzen Sie diese einen statt:

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

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

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

Sie können alle Kontrollkästchen wie folgt überprüfen:

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

Answer 5

Sie können auch das $ .FN Objekt 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 können sie mehr eindeutige Namen wie MyCheck () und myuncheck () in Fall geben möchten Sie eine andere Bibliothek verwenden, die diese Namen verwendet.

Answer 6

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

Die letzte wird das Click-Ereignis für das Kontrollkästchen Feuer, die andere nicht. Also, wenn Sie benutzerdefinierten Code in dem Onclick-Ereignisse für das Kontrollkästchen, die Sie schießen wollen, verwenden Sie die letzten.

Answer 7

Um eine Checkbox sollten Sie verwenden

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

oder

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

und ein Kontrollkästchen zu deaktivieren, sollten Sie immer auf false gesetzt:

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

Wenn Sie das tun

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

es entfernt das Attribut alle zusammen und deshalb werden Sie nicht in der Lage sein, die Form zurückgesetzt werden.

BAD DEMO jQuery 1.6 . Ich denke, das ist gebrochen. Für 1,6 Ich werde einen neuen Beitrag auf, dass machen.

NEUE ARBEITS DEMO jQuery 1.5.2 in Chrome funktioniert.

Beide Demos verwenden

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

Answer 8

Dies wählt Elemente, die das angegebene Attribut mit einem Wert enthält, die gegebenen Teilzeichen „ckbItem“ haben:

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

Es werden alle Elemente auswählen, die ckbItem in seinem Namen Attribut enthalten.

Answer 9

Unter der Annahme, dass die Frage ...

Wie kann ich eine Checkbox-Set BY VALUE?

Beachten Sie, dass in einem typischen Checkbox gesetzt, alle Eingänge-Tags die gleichen Namen haben, sie durch das Attribut unterscheiden value :. Gibt es keine ID für jeden Eingang des Satzes

Xian Antwort kann mit einem erweitert werden spezifischeren Selektor , die folgende Zeile von Code verwendet:

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

Answer 10

Ich vermisse die Lösung. Ich werde immer wie folgt:

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

Answer 11

eine Checkbox Um zu überprüfen, mit jQuery 1.6 oder höher nur dies zu tun:

checkbox.prop('checked', true);

Um zu deaktivieren, verwenden Sie:

checkbox.prop('checked', false);

Hier ist, was ich verwenden möchte eine Checkbox mit jQuery wechseln:

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

---

Wenn Sie mit jQuery 1.5 oder niedriger:

checkbox.attr('checked', true);

Um zu deaktivieren, verwenden Sie:

checkbox.attr('checked', false);

Answer 12

Hier ist eine Möglichkeit, es 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>

Answer 13

Versuchen Sie folgendes:

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

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

Answer 14

Hier ist der Code für aufgegebene und nicht markiert mit einer Taste:

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

Answer 15

Wir können elementObject mit jQuery für immer das Attribut geprüft:

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

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

Update: JQuery 1.6+ hat die neue Stütze Methode, die attr ersetzt, z.

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

Answer 16

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

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

Ich fand, dass ohne die Spanne, wird die Schnittstelle nicht egal aktualisieren, was Sie tun.

Answer 17

Hier ist der Code und Demo, wie mehrere Kontrollkästchen überprüfen ...

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

Answer 18

Eine andere mögliche Lösung:

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

Answer 19

Wenn mobil verwenden und Sie die Schnittstelle das Kontrollkästchen als ungeprüft zu aktualisieren und zu zeigen, verwenden Sie die folgenden Schritte aus:

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

Answer 20

Beachten Sie Speicherlecks im Internet Explorer vor href="http://en.wikipedia.org/wiki/Internet_Explorer_9" rel="noreferrer"> Internet Explorer 9 , wie die jQuery Dokumentation Zustände :

  

Im Internet Explorer vor Version 9, mit .prop () einem DOM setzen   Element-Eigenschaft auf etwas anderes als ein einfachen Grundwert   (Zahl, String oder boolean) können Speicherverluste verursachen, wenn die Eigenschaft   nicht entfernt (unter Verwendung .removeProp ()) wird, bevor das Element entfernt DOM   aus dem Dokument. Um sicher Werte auf DOM ohne Speicherobjekte   Lecks, verwenden .data ().

Answer 21

Für jQuery 1.6 +

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

Für jQuery 1.5.x und unter

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

Um zu überprüfen,

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

Answer 22

Um zu überprüfen, und deaktivieren

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

Answer 23

Wie @ livefree75 sagte:

jQuery 1.5.x und unter

Sie können auch das $ .FN Objekt 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));

Aber in neuen Versionen von jQuery, wir haben so etwas 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();

Answer 24

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

Answer 25

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

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

oder

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

---

Auch kürzer wäre:

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

---

Hier ist a jsFiddle auch.

Answer 26

Plain 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

Answer 27

Ich konnte es nicht funktioniert mit:

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

Sowohl wahr und falsch wäre die Checkbox. Was für mich gearbeitet wurde:

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

Answer 28

Wenn Sie eine Checkbox aktiviert wie;

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

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

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

Vor allem, wenn Sie das Kontrollkästchen Attribut checked entfernt.

Answer 29

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

Answer 30

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