Question

在检查/取消选中每个复选框时，代码工作正常，但如果我用来选择所有复选框并刷新页面，则会返回默认值，该值未经检查。

这是脚本：

     <script>
      $(document).ready(function(){      
        $("#checkAll").click(function () {
        $('input.box').not(this).prop('checked', this.checked);
        });    

        $("input.box").each(function() {
          var mycookie = $.cookie($(this).attr('name'));
          if (mycookie && mycookie === "true") {
          $(this).prop('checked', mycookie);
            }
            });

        $("input.box").change(function() {
            $.cookie($(this).attr("name"), $(this).prop('checked'), {
            path: '/',
            expires: 365
            });
       });
});
    </script>

以下是HTML：

    <table cellpadding="0" cellspacing="5" width="100%" height="60%">
        <tr>
            <input type="checkbox" id="checkAll">Check All
            <td><input class="box" type="checkbox" name="1" /></td>
            <td><input class="box" type="checkbox" name="2" /></td>
            <td><input class="box" type="checkbox" name="3" /></td>
        </tr>

Answer 1

您的复选框全部清除，因为刷新页面时，页面会再次加载。

要保留您选中的值，您有以下几种选择：

使用cookies。尽管如此，它可能会变得混乱。
将复选框绑定到事件并通过Ajax将值发送到服务器以将其保存在那里。现在，当重新加载页面时，您可以从服务器获取当前值并进行设置。
您也可以选择使用HTML5本地存储。因此，将复选框绑定到您的函数，并在更改值时，将其保存在本地存储中。这样就不会往返服务器（特别是如果这不是太关键）。现在，当再次重新加载页面时，您可以检查本地存储中的当前值并进行设置。

Answer 2

您似乎正在使用jQuery.cookie插件，因此这里有一个可以使用它的解决方案。

所有这一切都是将复选框的状态保存到cookie中，然后在页面重新加载时从cookie中读回它们。

此外，您可能不应该使用表格进行布局。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Persist checkboxes</title>
  </head>

  <body>
    <div>
      <label for="checkAll">Check all</label>
      <input type="checkbox" id="checkAll">
    </div>
    <div>
      <label for="option1">Option 1</label>
      <input type="checkbox" id="option1">
    </div>
    <div>
      <label for="option2">Option 2</label>
      <input type="checkbox" id="option2">
    </div>
    <div>
      <label for="option3">Option 3</label>
      <input type="checkbox" id="option3">
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>

    <script>
      $("#checkAll").on("change", function() {
        $(':checkbox').not(this).prop('checked', this.checked);
      });

      $(":checkbox").on("change", function(){
        var checkboxValues = {};
        $(":checkbox").each(function(){
          checkboxValues[this.id] = this.checked;
        });
        $.cookie('checkboxValues', checkboxValues, { expires: 7, path: '/' })
      });

      function repopulateCheckboxes(){
        var checkboxValues = $.cookie('checkboxValues');
        if(checkboxValues){
          Object.keys(checkboxValues).forEach(function(element) {
            var checked = checkboxValues[element];
            $("#" + element).prop('checked', checked);
          });
        }
      }

      $.cookie.json = true;
      repopulateCheckboxes();
    </script>
  </body>
</html>

刷新时如何保留select all复选框的值？

2 个答案: