J'ai ce contenu html:

<div class="myClass" style="display:none">
<table class="table table-hover">
.....
</table>
</div>

Comme vous pouvez le voir, il s'agit d'un tableau masqué

J'ai un checkbox pour l'afficher si la case est cochée

<label class="switch">
    <input type="checkbox" id="test" onclick="toggle('.myClass', this)" autocomplete="on" ></legend>
    <div class="slider round"></div>
</label>

<script language="JavaScript">
function toggle(className, obj) {
    var $input = $(obj);
    if ($input.prop('checked')) $(className).show(1000);
    else $(className).hide(1000);
}
</script>

Comme vous pouvez voir si la case est cochée, elle sera affichée et si elle n'est pas cochée, elle masquera mon div

Tout fonctionne très bien.

Maintenant, si je recharge cette page, je veux garder la case cochée si elle était cochée ou si elle était décochée, je l'ai obtenue de cette façon:

<script>
$(function(){
    var test = localStorage.input === 'true'? true: false;
    $('input').prop('checked', test || false);
});

$('input').on('change', function() {
    localStorage.input = $(this).is(':checked');
            if ($(this).prop('checked')) {
            $(className).show(1000); //checked
        }
    console.log($(this).is(':checked'));
});
</script>

Maintenant, mon problème est

Lorsque je recharge la page si la case à cocher est cochée, il ne montre pas le contenu .... donc je dois la décocher et la vérifier à nouveau pour que cela fonctionne.

Existe-t-il un moyen possible de recharger la page et de conserver mon contenu affiché si la case est cochée?

MODIFIER

Merci à @nnnnnn comme répondu avant que cela fonctionne:

<label class="switch">
    <input type="checkbox" id="test" ></legend>
    <div class="slider round"></div>
</label>

<div class="myClass" style="display:none">
<table class="table table-hover">
...
</table>

<script>
$(function(){        
    $('#test')
      .prop('checked', localStorage.input === 'true')
      .on('click', function() {
         localStorage.input = this.checked;
         if (this.checked) {
           $('.myClass').show(1000); //checked
         } else {
           $('.myClass').hide(1000);
         }
      })
      .trigger('change');
});
</script>
0
User100696 6 avril 2017 à 06:37

2 réponses

Meilleure réponse

La définition par programme de la propriété checked d'un élément ne déclenche pas aucun gestionnaire click ou change attaché à l'élément. Donc, après la ligne où vous avez défini cela, vous devez déclencher vous-même explicitement le gestionnaire change en appelant .trigger('change'), ou simplement .change().

Vous pouvez consolider votre code en sélectionnant $('#test') une fois, puis en enchaînant les méthodes requises après celui-ci:

<script>
$(function(){        
    $('#test')
      .prop('checked', localStorage.input === 'true')
      .on('change', function() {
         localStorage.input = this.checked;
         if (this.checked) {
           $('.myClass').show(1000); //checked
         } else {
           $('.myClass').hide(1000);
         }
      })
      .trigger('change');
});
</script>

Vous ne devriez pas avoir besoin de la fonction toggle() ou du gestionnaire en ligne onclick en plus de la liaison du gestionnaire d'événements via jQuery.

Notez que j'ai encore simplifié les choses. var test = localStorage.input === 'true'? true: false; peut être simplifié en var test = localStorage.input === 'true';, car l'opérateur === renvoie un booléen, et sur la ligne suivante, le || false peut être supprimé car à ce moment-là, vous savez que test est un booléen. Et au-delà de cela, vous n'avez pas vraiment besoin de la variable test étant donné que vous ne l'utilisez qu'une seule fois après avoir été définie.

De plus, vous étiez un peu incohérent avec la façon dont vous testiez l'état checked, en utilisant $(this).is(':checked') à un endroit et $(this).prop('checked') sur la ligne suivante. Les deux fonctionnent, mais étant donné que this est une référence à l'élément DOM, vous pouvez simplement dire this.checked pour tester la propriété directement sans jQuery. (Le seul moment où .is(':checked') a du sens est lorsqu'il est appelé sur un objet jQuery contenant plusieurs éléments, et vous voulez voir si au moins l'un d'entre eux est coché.)

3
nnnnnn 6 avril 2017 à 04:45

Essayer d'ajouter la ligne de code $ ('input'). Change (); comme

 $(function(){
        var test = localStorage.input === 'true'? true: false;
        $('input').prop('checked', test || false);
         $('input').change();
    });
0
Tej Patil 6 avril 2017 à 04:04