it-swarm.com.de

Einstellung für ein Kontrollkästchen mit jQuery "markiert"?

Ich möchte so etwas tun, um eine checkbox mit jQuery zu markieren:

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

oder 

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

Gibt es so etwas?

3783
tpower

Moderne jQuery

Verwenden Sie .prop() :

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

DOM API

Wenn Sie nur mit einem Element arbeiten, können Sie immer nur auf das zugrunde liegende HTMLInputElement zugreifen und dessen .checked ändern Eigentum:

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

Der Vorteil der Verwendung der Methoden .prop() und .attr() besteht darin, dass sie auf alle übereinstimmenden Elemente angewendet werden.

jQuery 1.5.x und niedriger

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

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

Beachten Sie, dass dies der Ansatz ist, der von den Unit-Tests von jQuery vor Version 1.6 verwendet wurde und der Verwendung von $('.myCheckbox').removeAttr('checked'); vorzuziehen ist, da letztere das Verhalten von a ändern, wenn das Kontrollkästchen anfangs aktiviert wurde Aufruf von .reset() in jedem Formular, das es enthält - eine subtile, aber wahrscheinlich unerwünschte Verhaltensänderung.

In den Version 1.6 Versionshinweisen und finden Sie einige unvollständige Erläuterungen zu den Änderungen an der Behandlung des Attributs/der Eigenschaft checked beim Übergang von 1.5.x auf 1.6 Der Abschnitt Attribute vs. Eigenschaften der Dokumentation .prop() .

5769
Xian

Benutzen:

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

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

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

Dies ist die richtige Methode zum Aktivieren und Deaktivieren von Kontrollkästchen mit jQuery, da dies plattformübergreifender Standard ist und erneutes Veröffentlichen 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 sollte für alle gängigen Browser gelten, ich kann jedoch keine Tests vor Internet Explorer 9 durchführen.

Das Problem (jQuery 1.6):

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

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

Fiddle

Die Lösung:

Durch die Verwendung der "checked" -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 es zu tun.

Fiddle

Dieses Plugin ändert die Eigenschaft checked aller von jQuery ausgewählten Elemente und aktiviert bzw. deaktiviert die Kontrollkästchen unter allen Umständen. Dies scheint zwar eine überragende Lösung zu sein, verbessert jedoch die Nutzererfahrung Ihrer Website und hilft, Frustrationen der Nutzer 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 Codeausschnitte verwenden:

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

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

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

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

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

Sie können das Häkchen entfernen, indem Sie das Attribut vollständig entfernen:

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

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

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

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.

75
livefree75
$("#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 jedoch benutzerdefinierten Code im onclick-Ereignis für das Kontrollkästchen haben, das Sie auslösen möchten, verwenden Sie den letzten.

64
Chris Brandsma

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.

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

Angenommen, die Frage ist ...

Wie überprüfe ich ein Checkbox-Set BY VALUE?

Denken Sie daran, dass in einem typischen Checkbox-Set alle Eingabe-Tags denselben Namen haben, sie unterscheiden sich durch das Attribut value: Für jede Eingabe des Sets gibt es keine ID.

Xians Antwort kann mit einem spezifischeren Selektor erweitert werden, indem die folgende Codezeile verwendet wird:

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

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

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

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.

44
Abou-Emish

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 eine niedrigere Version verwenden:

checkbox.attr('checked', true);

Um die Auswahl aufzuheben, verwenden Sie:

checkbox.attr('checked', false);
40
Ramon de Jesus

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>

35
Aeoril

Versuche dies:

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

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

Hier ist der Code für das 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 derselbe Codeblock, der die neuere Methode von Jquery 1.6+ verwendet, 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;
    });
});
28
starjahid

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

$(objectElement).prop('checked');
26
Prasanth P

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

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

Ich habe festgestellt, dass die Schnittstelle ohne den Bereich nicht aktualisiert wird, egal was Sie tun.

25
Clement Ho

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

Eine andere mögliche Lösung:

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

Beachten Sie Speicherverluste in Internet Explorer vor Internet Explorer 9 , da in der jQuery-Dokumentation Folgendes angegeben ist:

In Internet Explorer vor Version 9 verwenden Sie .prop (), um ein DOM .__ festzulegen. Elementeigenschaft zu einem anderen Element als einem einfachen primitiven Wert (number, string oder boolean) kann zu Speicherverlusten führen, wenn die Eigenschaft .__ ist. nicht entfernt (mithilfe von .removeProp ()), bevor das DOM-Element entfernt wird aus dem Dokument. Zum sicheren Setzen von Werten für DOM-Objekte ohne Speicher Lecks verwenden .data ().

18
naor

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');
18
logan

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");
18
Matt Peacock

Überprüfen und deaktivieren

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
17
jj2422
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
16
mahmoh

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

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

15
frieder

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

14
Alex W

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.

13
Serhat Koroglu

Ich konnte es nicht zum Laufen bringen mit:

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

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

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

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

Wenn Sie ASP.NET MVC verwenden, generieren Sie viele Kontrollkästchen und haben später um alle auszuwählen/die Auswahl aufzuheben mithilfe von JavaScript. Sie können Folgendes tun.

HTML

@foreach (var item in Model)
{
    @Html.CheckBox(string.Format("ProductId_{0}", @item.Id), @item.IsSelected)
}

JavaScript

function SelectAll() {       
        $('input[id^="ProductId_"]').each(function () {          
            $(this).prop('checked', true);
        });
    }

    function UnselectAll() {
        $('input[id^="ProductId_"]').each(function () {
            $(this).prop('checked', false);
        });
    }
10

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

Das kann jemandem helfen.

HTML5

 <input id="check_box" type="checkbox" onclick="handleOnClick()">

JavaScript.

  function handleOnClick(){

      if($("#check_box").prop('checked'))
      {        
          console.log("current state: checked");
      }
      else
      {         
          console.log("current state: unchecked");
      }    
 }
7
Sedrick

Sie können dies versuchen:

$('input[name="activity[task_state]"]').val("specify the value you want to check ")
5
anusha
$(".myCheckBox").prop("checked","checked");
4
mathew

if($('jquery_selector').is(":checked")){
  //somecode
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

4
David Arul

Falls Sie Bootstrap verwenden (vielleicht unbewusst) ...

$('#myCheckbox').bootstrapToggle('on')
$('#myCheckbox').bootstrapToggle('off')

http://www.bootstraptoggle.com/

3
Kenmeister

Sie können die Checkbox Checked Condition mit JS auf verschiedene Arten aktivieren. Sie können unten sehen.

  1. Erste Methode - $('.myCheckbox').prop('checked', true);

  2. Zweite Methode - $('.myCheckbox').attr('checked', true);

  3. Dritte Methode (zur Überprüfung der Bedingung, ob das Kontrollkästchen aktiviert ist oder nicht) - $('.myCheckbox').is(':checked')

2

Wenn Sie .prop('checked', true|false) verwenden und checkbox nicht geändert haben, müssen Sie trigger('click') wie folgt hinzufügen

//check
$('#checkboxF1').prop( "checked", true).trigger('click');


//un-Check
$('#checkboxF1').prop( "checked", true).trigger('click');
1
Alex Montoya

Bearbeitet am Januar 2019

Sie können verwenden: .prop (propertyName) - Version hinzugefügt: 1.6

p {margin: 20px 0 0;}
b {color: red;}
label {color: red;}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check here</label>
<p></p>
 
<script>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    "The .attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    "The .prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    "The .is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>
 
</body>
</html>

Auf Winkelrahmen

Beispiel 1

In Ihrer .html-Datei

<input type="checkbox" (change)="toggleEditable($event)">

In Ihrer .ts-Datei

toggleEditable(event) {
     if ( event.target.checked ) {
         this.contentEditable = true;
    }
}

Beispiel 2

In Ihrer .html-Datei

<input type="checkbox" [(ngModel)]="isChecked" (change)="checkAction(isChecked ? 'Action1':'Action2')" />
0
Lyes CHIOUKH