Das Kontrollkästchen ist immer noch aktiviert, wenn Sie auf die Schaltfläche “Zurück” klicken, aber es hat kein “aktiviertes” Attribut

Lesezeit: 5 Minuten

Benutzeravatar von Valérian Polizzi
Valérian Polizzi

Ich arbeite an einem Kontrollkästchen-basierten Filter für einen E-Commerce. Alles funktioniert gut, aber wenn ich versuche, über die Zurück-Schaltfläche zurückzugehen, bleiben die Kontrollkästchen immer noch geprüft ohne geprüftes Attribut.

Mir ist aufgefallen, dass dieses “Problem” auftritt auf:

  • Safari
  • Chrom

Die einzige Möglichkeit, die ich gefunden habe, ist, die Seite neu zu laden. Aber das “user-went-back”-Ereignis scheint nicht abfangbar zu sein, und ich möchte nicht jede einzelne Seite aktualisieren.

Alle meine Kontrollkästchen auf Standard zu setzen, macht keinen Sinn.

Das Deaktivieren des Chrome-Cache hat keine Auswirkung.


Ich weiß nicht, ob Beispiele meines Codes nützlich wären

BEARBEITEN: Es ist mein allererster Beitrag, also sagen Sie mir unbedingt, warum meine Frage unklar erscheint

  • Passen Sie auf, wenn Sie die verwenden ready Veranstaltung (wie Matt The Ninja und Suyog vorschlagen). Es wird nicht auf der Rückseite ausgelöst, es sei denn, Sie geben a an onunload Handler. siehe stackoverflow.com/questions/158319/… Genau window.onunload = function(){}; ist ausreichend

    – king_nak

    16. November 2015 um 8:58 Uhr

  • Das klingt sehr gut. Tatsächlich ist das Problem gelöst. Danke @king_nak

    – Valérian Polizzi

    16. November 2015 um 9:28 Uhr


Es gibt einen verrückten Trick, um dieses Problem zu beheben. Hinzufügen autocomplete="off" zu Ihren Checkboxen. Klingt verrückt, funktioniert aber!

  • Das scheint keine gute Lösung zu sein, auch wenn es funktioniert. Klingt fast so, als würden Sie einen Fehler ausnutzen. Was ist, wenn der “Fehler” in zukünftigen Browsern behoben wird? Verrückte Antworten brauchen eine Erklärung, und eine rationale Antwort gewinnt jeden Tag über eine verrückte Antwort.

    – osulisch

    12. März 2021 um 23:53 Uhr


  • Es klingt für mich so, als würde das OP das geprüfte Attribut des Eingabeelements lesen, wenn es seine geprüfte Eigenschaft lesen sollte. Die überprüft Attribut gibt nur an, wie das Kontrollkästchen aussehen soll initialisiert, aber Browser merken sich den Formularstatus, wenn Sie vorwärts/rückwärts navigieren. Die überprüft Eigentum sollte damit übereinstimmen, wie der Browser das Kontrollkästchen derzeit darstellt.

    – osulisch

    12. März 2021 um 23:56 Uhr


  • “Im Gegensatz zu anderen Browsern behält Firefox standardmäßig den dynamischen aktivierten Zustand einer über das Laden von Seiten hinweg bei. Verwenden Sie das Autocomplete-Attribut, um diese Funktion zu steuern.” developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…

    – BeeZee

    26. März 2021 um 13:55 Uhr


Benutzeravatar von user3649978
Benutzer3649978

Ich weiß, dass dies eine alte Frage ist, aber jemand könnte dieselbe Frage “googlen” und landet hier, genau wie ich es getan habe. Im Jahr 2019 hat Chrome 71 immer noch dieses Verhalten, also wird es so schnell nicht verschwinden. In der Zwischenzeit ist hier ein Skript, um den aktivierten Status einfach an das aktivierte Attribut anzupassen.

<script>
/* This script is to FIX some strange browser (Chrome included) behaviour.
History back returns false checks on checkboxes.
The checked HTML attribute is only a "DEFAULT VALUE" unfortunately */
var filter_form = document.getElementById("filter_form");
var inputs = filter_form.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type == "checkbox") {
      /* If default is checked, but state is not checked, check it*/
      if (inputs[i].defaultChecked == true) {
        if (inputs[i].checked != true) {
          inputs[i].checked = true;
        }
      /* If defeault not checked, but state is checked, uncheck it */
      } else {
        if (inputs[i].checked == true) {
          inputs[i].checked = false;
        }
      }
    }  
}
</script>

Verwenden Sie Javascript, um das Formular zu bereinigen, wahrscheinlich schneller mit einem Framework wie jQuery. Dann sowas…

$( document ).ready(function() {
    $(':input').val(''); //This would clear all inputs.
});

Wenn das Dokument also fertig geladen ist, werden alle Eingaben gelöscht.

  • Tatsache ist, dass meine Kontrollkästchen in dieser Situation als Filter fungieren. Das Löschen aller Kontrollkästchen nach dem Laden der Seite macht keinen Sinn, da dadurch wiederhergestellt würde, welches Kontrollkästchen über $_REQUEST aktiviert werden sollte

    – Valérian Polizzi

    16. November 2015 um 8:58 Uhr


  • Verwenden Sie JS, um HTTP-Parameter abzurufen, und wenden Sie das Kontrollkästchen dann entsprechend an/löschen Sie es? Entschuldigung, ich glaube, ich habe Ihre erste Frage falsch verstanden.

    – Matt der Ninja

    16. November 2015 um 9:12 Uhr

Ich hatte dieses Problem auch, wollte aber den aktivierten Status beibehalten (und einfach den Seitenstatus daran anpassen). Ich hatte das Problem, dass Chrome einfach den aktivierten Zustand des Kontrollkästchens geändert hat, nachdem das JavaScript ausgeführt wurde, einschließlich des Ladeereignisses, ohne weitere Ereignisse (wie Änderung oder Eingabe) auszulösen.

Irgendwelche Veranstaltungen? Nein! Wie eine andere Frage darüber, wie Firefox die Seite im Cache hält, ohne JS auszuführen, wenn Sie auf die Zurück-Schaltfläche klicken, gibt es ein Ereignis, das ausgelöst wird, nachdem alles eingestellt und jedes andere Javascript ausgeführt wurde – pageshow on window.

window.onpageshow  = () => {
    updateContent();
};

Dies wird nicht nur in Firefox ausgeführt, auch nachdem der Verlauf wiederhergestellt wurde, sondern auch nachdem Chrome das Kontrollkästchen nach dem Zurücksetzen des Verlaufs überprüft hat und die aktivierte Eigenschaft des Kontrollkästchens im richtigen Zustand ist.

Benutzeravatar von Suyog
Suyog

Verwenden Sie die folgende Funktion bei Körperbelastung.

<body onLoad="uncheck()">

<script>
    function uncheck() {
        $(':checkbox:checked').prop('checked',false);
        //or you can also use removeAttr
        //$(':checkbox:checked').removeAttr('checked');
    }
</script>

Prüfen Stütze und entfernenAttr für mehr Details

Oder Sie können auch den folgenden Code verwenden

<script>
$( document ).ready(function() {
    $(':checkbox:checked').prop('checked',false);
    //$(':checkbox:checked').removeAttr('checked');
});
</script>

Prüfen .bereit für mehr Details.

ODER

Falls Sie alle Eingabefelder löschen möchten, hier ist die Antwort dafür mit ausführlicher Erklärung: Zurücksetzen eines mehrstufigen Formulars mit jQuery

1434030cookie-checkDas Kontrollkästchen ist immer noch aktiviert, wenn Sie auf die Schaltfläche “Zurück” klicken, aber es hat kein “aktiviertes” Attribut

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy