复选框的jQuery触发事件答案

【问题标题】：Jquery trigger event for checkbox复选框的jQuery触发事件
【发布时间】：2023-04-04 16:37:01
【问题描述】：

我有一系列的复选框，我在点击时编写了 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 是复选框类。点击它，我打开另一个系列的复选框。现在我希望在他们再次访问该页面时自动为他们的复选框完成此操作

【问题讨论】：

标签： jquery checkbox eventtrigger

【解决方案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>

【讨论】：

我仍然可以实现这些值。我的问题是我希望那些子类元素（在选中复选框时打开）应该在用户再次访问页面时自动打开
编辑了我的代码再试一次。 .main 支票簿是否显示正确的状态？你是怎么做到的？
努力工作！相反，当我刷新页面时，它会检查所有复选框。我不知道为什么？

【解决方案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

【讨论】：

我仍然可以实现这些值。我的问题是我希望那些子类元素（在选中复选框时打开）应该在用户再次访问页面时自动打开
有了这个代码，它甚至可以永远！对于会话使用 sessionStorage。

【解决方案3】：

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

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

查看这篇使用 jQuery 处理 cookie 数据的相关帖子 - How do I set/unset cookie with jQuery?

【讨论】：

我仍然可以实现这些值。我的问题是我希望那些子类元素（在选中复选框时打开）应该在用户再次访问页面时自动打开
是的 - 你必须做一些 trigger('click') 魔术来模拟用户点击这些元素...
好吧，您检查已保存的数据，并根据之前单击的内容重新创建相同的状态。 trigger function 基本上创建了诸如单击或双击之类的事件。您将使用此触发函数来模拟真实用户单击元素。