Checkbox nach reload noch aktiviert

Stratos2k · 17. Mai 2014

Hallo alle zusammen

Ich hab da mal ne Frage.

Ich möchte, dass durch anklicken der Checkbox ein Text mit Formular angezeigt wird.
Das klappt zwar soweit, doch wenn die Checkbox bereits aktiviert ist, und Seite neu geladen
wird, ist noch ein Haken in der Checkbox, der Text aber weg.

Wie krieg ich den haken weg, nach einem neuladen der Seite??

HTML

<script>$(document).ready(function(){
        	$('input#cbox').click(function(){
            	$('#mailbox').toggle('fast');
        	})
    	});
</script>




<input type="checkbox" name="cbox" id="cbox" value="1"> Newletter abonnieren!<br />
<br />
<p id="mailbox">Geben Sie hier Ihre Mailadresse ein.<br />
<input type="text" name="email" size="40" /></p>

Alles anzeigen

CSS

#mailbox {
	display: none;
}

The Scout · 17. Mai 2014

Hmm, ich hätte das erst einmal andersrum aufgezogen, also grundsätzlich anzeigen und dann das JS progressiv aufschalten.
Da du ja mit jQuery arbeitest, hier mal meine Idee:

JavaScript

$({ // Bewirkt das gleiche wie $(document).ready(function() {
    $("#mailbox").hide(); // Mit JS verstecken




    if ($("#cbox:checked").length != 0) {
        $("#mailbox").slideDown();
    } else {
        $("mailbox").slideUp();
    }
});

Alles anzeigen

Und dann aber dein display: none; bitte weglassen.

dekonstruktiv · 17. Mai 2014

Trotzdem wäre für die Information ein Session Cookie notwendig.

Basi · 18. Mai 2014

Wozu eine Session? Beschrieben ist das nach dem neu Laden der Seite die Checkbox checked ist, dafür haben wir JavaScript:

JavaScript

if( $('input#cbox').attr('checked') == true ) { 
  $('input#cbox').attr('checked', false);
 }

Das verknüpfen wir mit einem onload für die Checkbox und alles geht ganz wunderbar.

Stratos2k · 18. Mai 2014

Erstmal Danke für eure Hilfe.

Irgendwie mach ich was falsch...

Hab den Vorschlag von TheScout mal 1:1 übernommen, und auch das
display: none; entfernt, aber das hat nicht geklappt. Der Text war dann
immer sichtbar, und beim "checken" der Checkbox hat sicht nix verändert.

Dafür hab ich bemerkt, dass nur im Firefox der Haken bleibt nach reload, in
Chrome funktionierts eigendlich so wie ich will. Hat das wohl mit meinen Browser
einstellungen zu tun?

Zitat von Basiii

Das verknüpfen wir mit einem onload für die Checkbox und alles geht ganz wunderbar.

@Basiii: sorry hab deinen Vorschlag nicht ganz verstanden. Wie würde das gehn?
Bin hald noch Anfänger, sorry falls ich ne doofe Frage stelle.

LG

Basi · 18. Mai 2014

Auf diese Weise kann eigentlich nicht mehr viel schiefgehen:

HTML

<form>
  <input type="checkbox" name="newsletter" id="cBox" /> Newsletter erhalten
  <label>
    <input type="text" name="email" /> E-Mailadresse
  </label>
</form>

CSS

form label {
  display: none;
}

JavaScript

$(document).ready(function(){
    if($("#cBox").prop("checked") == true){
      $("#cBox").prop("checked", false);
    }




    $("#cBox").click(function(){
      if($("#cBox").prop("checked") == true){
        $("form label").show();
      } else {
        $("form label").hide();
      }
    });
  });

Alles anzeigen

Stratos2k · 18. Mai 2014

Juhuu es funktioniert einwandfrei:)

Vielen Dank für deine Geduld!

Basi · 18. Mai 2014

Kein Thema

Darf ich interessehalber fragen mit welchem Browser du es schaffst das die Checkbox nach dem Reload noch aktiv ist?

Stratos2k · 18. Mai 2014

Klar.
Das war mit Firefox, aber nun ist die Checkbox nicht mehr aktiv nach dem reload.

dekonstruktiv · 19. Mai 2014

Zitat von Basiii

Wozu eine Session? ...

Ich hatte mich verlesen ... sorry /o\

Checkbox nach reload noch aktiviert

Jetzt mitmachen!

Teilen