Question

我有一系列的复选框，我已经点击了jquery脚本。当用户点击复选框时，它会打开另一系列复选框并继续。现在我的问题是，当用户检查其中几个复选框时，移动到下一页并出于某种原因他/她回到复选框页面。然后我应该把他/她检查过的所有盒子打开。当dom加载

时，我写了一个复选框测试

$(document).ready(function(){
   if($('.main').is(':checked')){
      $(this).trigger('click'); 
   }else{
      //do  nothing
   }

  $('.main').click(function(){
      if($('.main').is(':checked')){
       var val = $(this).attr('alt');
       $('#'+val).show();
   }else{
       var val = $(this).attr('alt');
       $('#'+val).hide();
   }
  });
});

如上所述。 Main是复选框类。点击它，打开另一系列复选框。现在，我希望在他们再次访问该页面时自动完成这些复选框

Answer 1

使用session或cookie来保存.main类复选框值，并在您返回时相应地检查它们，然后使用以下代码：

<script type="text/javascript">
$(document).ready(function(){

   $('.main').each(function(){
      if($(this).is(':checked')){
        var val = $(this).attr('alt');
        $('#'+val).show();
      }else{
        var val = $(this).attr('alt');
        $('#'+val).hide();
       }
     });


   if($('.main').is(':checked')){
      $(this).trigger('click'); 
   }else{
      //do  nothing
   }

  $('.main').click(function(){
      if($('.main').is(':checked')){
       var val = $(this).attr('alt');
       $('#'+val).show();
   }else{
       var val = $(this).attr('alt');
       $('#'+val).hide();
   }
  });
});
</script>

Answer 2

我只是使用一些JSON和本地存储来跟踪已检查的框等。

$(document).ready(function () {
    if (localStorage.getItem('boxes')) {
        var boxes = JSON.parse(localStorage.getItem('boxes'));
        $.each(boxes, function (idx, val) {
            var box = $('.main').eq(idx);
            box.prop('checked', val);
            $('#' + box.attr('alt')).toggle(val);
        });
    }

    $('.main').on('change', function () {
        var val = $(this).attr('alt'),
            boxes = {};

        $.each($('.main'), function (i, el) {
            boxes[$(el).index('.main')] = el.checked;
        });

        $('#' + val).toggle(this.checked);
        localStorage.setItem('boxes', JSON.stringify(boxes));
    });
});

DEMONSTRATION

Answer 3

通常是浏览器决定“帮助”并重新填写用户已经完成的表单。您不应该依赖浏览器，因为设置可以轻松更改，并且可能因用户而异。

相反，您可能想要考虑将单击的复选框存储在cookie / localstorage中，或者通过AJAX将每次单击发送到您的服务器。然后，当用户登陆页面时，您可以检查cookie的内容或检索通过AJAX保存的单击元素;然后，您可以重新创建相应元素的点击次数。

使用jQuery - How do I set/unset cookie with jQuery?

列出处理cookie数据的相关帖子

Jquery触发事件的复选框

3 个答案: