Jquery触发复选框事件

Question

Jquery触发复选框事件

5

我有一系列的复选框，我编写了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();
   }
  });
});

正如您上面所看到的，主要是复选框类。当其被点击时，我会打开另一系列复选框。现在，当用户再次访问页面时，我希望他们已选中的复选框能够自动完成此操作。

- Saravanan Sampathkumar

3个回答

1

我会使用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));
    });
});

演示

- adeneo

我仍然可以获取那些数值。我的问题是，当用户再次访问页面时，我希望这些子类元素（在复选框被选中时打开）能够自动展开。 - Saravanan Sampathkumar

使用此代码，它将永远生效！仅在会话中使用sessionStorage。 - adeneo

0

通常，是浏览器决定“帮助”用户填写已完成的表单。您不应该依赖浏览器，因为设置很容易改变，而且可能因用户而异。

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

查看此相关帖子以使用jQuery处理cookie数据 - 如何使用jQuery设置/取消cookie？

- Lix

我仍然可以获取这些值，但我的问题是，当用户再次访问页面时，我希望那些子类元素（在复选框被选中时打开）能够自动打开。 - Saravanan Sampathkumar

是的 - 你需要进行一些 trigger('click') 的操作来模拟用户点击这些元素... - Lix

好的，你检查保存的数据并根据之前点击的内容重新创建相同的状态。触发函数基本上创建了事件，如单击或双击。你会使用这个触发函数来模拟真实用户点击一个元素的情况。 - Lix

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- saifur · Accepted Answer

使用会话或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>