Question

我在index.html中使用此复选框类型：

<input class="check-1" type="checkbox" value="1" id="check-1"/>

此代码在我的.js中

$(".Categorie.1").show();
$(".check-1").click(function() {
    if($(this).is(":checked")) {
        $(".Categorie.1").hide();
    } else {
        $(".Categorie.1").show();
    }
});

//localstorage
$('input[type="checkbox"]').each(function(){
    $(this).prop('checked', (localStorage.getItem($(this).attr('id')) === 'true') ? 'checked' : '')
});

$('input[type="checkbox"]')  
  .on('change', function() {
    localStorage.setItem($(this).attr('id'), this.checked);
    if (this.checked) {
      $('.' + $(this).data('target')).show();
    } else {
      $('.' + $(this).data('target')).hide();
    }
  })
  .trigger('change');

当我加载页面时，没问题，选中的复选框仍被选中。但是DIV出现了...

有解决此问题的解决方案吗？

顺便说一句，我认为代码很繁重。可以制作更紧凑的版本吗？

非常感谢：-）

Answer 1

//fake out the localStorage for StackOverflow
var fakeLocalStorage = {
  getItem: function ( key ) {
    if ( key === 'check-1' ) {
      return 'true';
    }
    
    return null;
  }
};

$('.check-1').on('change', function() {
    if (this.checked) {
        $(".Categorie.1").hide();
    } else {
        $(".Categorie.1").show();
    }
});

$('input:checkbox').each(function(){
    var originalValue = this.checked;
    
    this.checked = fakeLocalStorage.getItem(this.id) === 'true';
    
    // Changing the value of the checked logically does not generate
    // an event.  If you want to force the change listener to execute
    // due to your change, you can logically trigger the event
    if (originalValue != this.checked) $(this).trigger('change');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="check-1" type="checkbox" value="1" id="check-1">
<div class="Categorie 1">Show Me!</div>

Answer 2

这里有更完整的代码。

保存过程正常。刷新后，复选框始终处于选中状态。

但是，如果您检查是否去除了红色或其他颜色，则刷新后，DIV将返回。

谢谢;-）

$("input[type=checkbox]").each(function() {
  var name = $(this).attr('name');

  if (localStorage.getItem(name) == "true") {
    $(this).prop('checked', true);
  }
});

$("input[type=checkbox]").change(function() {

  var name = $(this).attr('name'),
    value = $(this).is(':checked');
  localStorage.setItem(name, value);
});

$('.togglebox').change(function () {
    $("."+this.value).toggleClass('hide');
});

.one {
    background: red;
}
.two {
    background: green;
}
.three {
    background: blue;
}
.four {
    background: black;
}
.hide {
    display: none;
}

<input class="togglebox" id="one-box" type="checkbox" name="boxes1" value="one" >First
<input class="togglebox" id="two-box" type="checkbox" name="boxes2" value="two" >Second
<input class="togglebox" id="three-box" type="checkbox" name="boxes3" value="three" >Third
<input class="togglebox" id="four-box" type="checkbox" name="boxes4" value="four" >Fourth
<div style="width: 300px; height: 100px;" class="one"></div>
<div style="width: 300px; height: 100px;" class="two"></div>
<div style="width: 300px; height: 100px;" class="three"></div>
<div style="width: 300px; height: 100px;" class="four"></div>

复选框启用/禁用DIV-本地存储-加载时加载状态

2 个答案: