Wenn das Kontrollkästchen aktiviert ist, tun Sie dies

126

Wenn ich ein Kontrollkästchen aktiviere, soll es sich drehen <p> #0099ff.

Wenn ich das Kontrollkästchen deaktiviere, soll es rückgängig gemacht werden.

Code, den ich bisher habe:

$('#checkbox').click(function(){
    if ($('#checkbox').attr('checked')) {
        /* NOT SURE WHAT TO DO HERE */
    }
}) 
android.nick
quelle
1
"... wenn es deaktiviert ist, um dieselbe Funktion zu deaktivieren." - Die an übergebene Funktion .click()wird beim Klickereignis aufgerufen. Daher verstehe ich nicht, was Sie unter "Aktivieren" und "Deaktivieren" verstehen. Wenn das Kontrollkästchen aktiviert ist, können Sie die Funktion aufrufen a(). Sie müssen jedoch die Umkehrfunktion schreiben, um sie aufzurufen, wenn das Kontrollkästchen nicht aktiviert ist . Ich bin verwirrt.
Jensgramm
Sie können natürlich .bind()und .unbind()Ereignisse zu einem anderen Elemente auf dem Checkbox Zustand basieren. Ist es das, wonach du suchst?
Jensgramm
1
Entschuldigung für Spam, aber ich habe ein Beispiel dafür gemacht, wovon ich spreche.
Jensgramm
1
Ich weiß, dass dies ein alter Beitrag ist, aber jetzt verwendet jQuery das, prop()wofür diese Frage verwendet werden wollte attr(). Die prop()Methode war damals noch nicht erstellt worden. Die Antworten dazu this.checkedsind jedoch wahrscheinlich immer noch nützlich.
Tryse

Antworten:

235

Ich würde verwenden .change() und this.checked:

$('#checkbox').change(function(){
    var c = this.checked ? '#f00' : '#09f';
    $('p').css('color', c);
});

- -

Über die Verwendung von this.checked
Andy E wurde ausführlich beschrieben, wie wir dazu neigen, jQuery zu überbeanspruchen: Nutzen Sie die unglaubliche Leistung von jQuery, um auf Eigenschaften eines Elements zuzugreifen . Der Artikel behandelt speziell die Verwendung von, .attr("id")aber in dem Fall, dass #checkbox es sich um ein <input type="checkbox" />Element handelt , ist das Problem für $(...).attr('checked')(oder sogar) dasselbe$(...).is(':checked') ) vs. this.checked.

Jensgramm
quelle
48

Versuche dies.

$('#checkbox').click(function(){
    if (this.checked) {
        $('p').css('color', '#0099ff')
    }
}) 

Manchmal übertreiben wir jquery. Viele Dinge können mit jquery mit einfachem Javascript erreicht werden.

Chinmayee G.
quelle
34

Es kann vorkommen, dass "this.checked" immer "on" ist. Daher empfehle ich:

$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    console.log('Checked');
  } else {
    console.log('Unchecked');
  }
});
Benny Neugebauer
quelle
In meinem Fall habe ich gerade geändert, $(':checkbox')damit es funktioniert;)
Pathros
21

Wenn Sie eine Klasse mit einer anderen Farbe definieren, wechseln Sie die Klasse

$('#checkbox').click(function(){
    var chk = $(this);
    $('p').toggleClass('selected', chk.attr('checked'));
}) 

Auf diese Weise ist Ihr Code sauberer, da Sie nicht alle CSS-Eigenschaften angeben müssen (sagen wir, Sie möchten einen Rahmen, einen Textstil oder einen anderen hinzufügen ...), sondern nur eine Klasse wechseln


quelle
4
+1 für generische Lösung. Es gibt keinen Grund zu tun $('#checkbox').attr('checked'), aber wenn wir wissen , dass #checkbox ist ein Kontrollkästchen (falls nicht, wird die ID eher irreführend). this.checkedWird besorgt.
Jensgramm
@jensgram @fcalderan +1 Danke für den Tipp! Ich hatte toggleClass mit Schalter noch nie gesehen. Ich lösche meinen Beitrag, da er nutzlos ist. Es tut mir leid, so wählerisch zu sein, aber ich denke, diese Antwort wäre 100% perfekt, wenn '#checkbox' nicht zweimal ausgewählt würde: Vielleicht stattdessen $ (this) verwenden? Oder die Lösung von Jensgram?
Angriff
@attack natürlich können Sie Ihr Element vor der Verwendung zwischenspeichern (siehe Code jetzt). this.checked ist sogar schneller als $ (..). attr ('checked')
4

Ich habe eine verrückte Lösung für den Umgang mit diesem Problem gefunden, bei dem das Kontrollkästchen hier nicht aktiviert oder aktiviert ist. Hier ist mein Algorithmus ... Erstellen Sie eine globale Variable, sagen wir var check_holder

check_holder hat 3 Zustände

  1. undefinierter Zustand
  2. 0 Zustand
  3. 1 Zustand

Wenn das Kontrollkästchen aktiviert ist,

$(document).on("click","#check",function(){
    if(typeof(check_holder)=="undefined"){
          //this means that it is the first time and the check is going to be checked
          //do something
          check_holder=1; //indicates that the is checked,it is in checked state
    }
    else if(check_holder==1){
          //do something when the check is going to be unchecked
          check_holder=0; //it means that it is not checked,it is in unchecked state
    }
     else if(check_holder==0){
            //do something when the check is going to be checked
            check_holder=1;//indicates that it is in a checked state
     }
});

Der obige Code kann in vielen Situationen verwendet werden, um herauszufinden, ob ein Kontrollkästchen aktiviert wurde oder nicht. Das Konzept dahinter besteht darin, die Kontrollkästchenzustände in einer Variablen zu speichern, dh wenn sie aktiviert oder deaktiviert ist. Ich hoffe, die Logik kann verwendet werden, um Ihr Problem zu lösen.

zedecliff
quelle
1
Die Lösung ist zwar verrückt, aber nicht gut. Ja, globale Variablen können Ihnen helfen, ein Problem heute zu lösen, aber sie werden mit ziemlicher Sicherheit morgen zu einem Problem für Sie. Vermeiden Sie sie nach Möglichkeit, was in 99% der Fälle der Fall ist. Sie machen es unmöglich, über Ihren Code nachzudenken, ohne sich um den globalen Zustand zu sorgen. Eine globale Variable mag unschuldig aussehen, wird aber schnell zu zehn, dann zu Hunderten. Ich war dort, habe das gesehen und es ist nicht schön.
Bijancn
3

Überprüfen Sie diesen Code:

<!-- script to check whether checkbox checked or not using prop function -->
<script>
$('#change_password').click(function(){
    if($(this).prop("checked") == true){ //can also use $(this).prop("checked") which will return a boolean.
        alert("checked");
    }
    else if($(this).prop("checked") == false){
        alert("Checkbox is unchecked.");
    }
});
</script>
Prabhjit Singh
quelle
1
$('#checkbox').change(function(){
   (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});
Klaster_1
quelle
1

Wahrscheinlich können Sie mit diesem Code Aktionen ausführen, wenn das Kontrollkästchen aktiviert oder deaktiviert ist.

$('#chk').on('click',function(){
    if(this.checked==true){
      alert('yes');
    }else{
      alert('no');
    }
});
Sanjiv Malviya
quelle
0

Optimale Implementierung

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});

Demo

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input id="checkbox" type="checkbox" /> 
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est
    laborum.
</p>

John Slegers
quelle
0

Warum nicht die eingebauten Ereignisse nutzen?

$('#checkbox').click(function(e){
    if(e.target.checked) {
     // code to run if checked
        console.log('Checked');

     } else {

     //code to run if unchecked
        console.log('Unchecked');
     }
});
Paul 501
quelle