Checkbox nicht schließen Absatz

Ich kann es nicht erklären, warum dies nicht funktioniert:Checkbox nicht schließen Absatz

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     if ($('#check').is(':checked')) { 
      $('p').hide(); 
     } else { 
      $('p').show(); 
     } 
    }); 
</script> 
</head> 
<body> 
    <input type="checkbox" id="check" /> 
    <p>If you click on the checkbox, I will disappear.</p> 
</body> 
</html>

Fiddle

Wenn ich auf das Kontrollkästchen klicken sollte es das p-Tag verstecken, aber es funktioniert nicht. .. Dies sollte so einfach sein, aber dann ist es wieder nicht :(

Quelle

2016-11-09 lewis4u

Sie nur Ihren Code auf Last der Seite ausgeführt wird. Sie müssen einen "Change" Event-Handler zu Ihrer Checkbox hinzufügen –

Sie fehlen onclick Aktion – Nomeaning25

aaah Sie haben Recht ... können Sie eine Antwort so dass ich es akzeptieren – lewis4u

Sie führen nur Ihren Code beim Laden der Seite. Sie müssen eine 10 Event-Handler zu Ihrem Kontrollkästchen hinzufügen. Beachten Sie auch, dass Sie kann den Code vereinfachen, indem Sie dieübergebenEigenschaftswert auf der toggle() Methode:

$(document).ready(function() { 
 
    $('#check').change(function() { 
 
    $('p').toggle(!this.checked); 
 
    }).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="check" /> 
 
<p>If you click on the checkbox, I will disappear.</p>

Quelle

2016-11-09 10:22:34

Rory ich habe ein Problem jetzt ... wenn ich das Kontrollkästchen anklicke und versuche, das Formular zu senden, und wenn es Fehler gab, wird meine Seite neu geladen und die Checkbox-Bedingung wird geändert .... gibt es eine Möglichkeit, das Kontrollkästchen an den Zustand zu erinnern? Oder sollte ich eine neue Frage dazu auf SO stellen – lewis4u

Sie müssen den Zustand der Checkbox irgendwo speichern, entweder 'localStorage',' sessionStorage', ein Cookie, serverseitige Sitzung oder eine Backend-Datenbank. Es sollte ein paar Fragen dazu schon geben, wenn Sie suchen. Fühlen Sie sich frei, eine neue Frage darüber zu stellen, aber fügen Sie bitte Ihren Versuch hinzu. –

Verwenden Sie 'localStorage' – Bharat

ich Ihre jsfiddle aktualisiert & Arbeit nutzt die jquery .change Funktion.

$(document).ready(function(){ 

    $('#check').change(function() { 
     if ($('#check').is(':checked')) { 
      $('p').css("display","none"); 
     } 
     else { 
      $('p').css("display","block"); 
     } 
    }); 
});

https://jsfiddle.net/d7d2n0x4/2/

Quelle

2016-11-09 10:26:40

danke, aber Rory hat es sehr schön und sauber gemacht, also werde ich es als Antwort akzeptieren. – lewis4u

Try it 
// for protect global scope use closure 
(function ($) { 
    // document ready 
    $(function(){ 
    // use prop method for checkbox 
    if ($('#check').prop("checked")) { 
     $('p').slideToggle(250); 
    } 
    }); 
}(jQuery));

Quelle

2016-11-09 10:30:46

Die Seite wird schneller geladen, wenn Sie den Code auf der Seite nach unten platzieren. Der Skriptstart wird ausgeführt, wenn DOM bereit ist. –

Arbeitsbeispiel https://jsfiddle.net/hu2ngcqg/2/ –

Checkbox nicht schließen Absatz

Antwort

Verwandte Themen