如何在页面刷新后保存复选框状态

How to save the checkbox state even after the page refresh?

本文关键字：保存 复选框 状态 刷新      更新时间：2023-09-26

我有多个复选框在我的UI，当检查做一些操作。但是当我刷新页面时，所有的复选框又被选中了。我如何使用AJS。Cookie (Atlassian Javascript框架)来保存状态。源代码，我写的，但它给出的cookie值为未定义。

'#generate-canvas-button'是传递所有选中复选框的按钮的id。

// Wait until the page is completely loaded.
AJS.$(document).ready(function() {
  // Iterating over all checkboxes on page.
  $('input:checkbox').each(function() {
    // Getting checkbox name.
    var name = $(this).attr('name');
    // Checking saved cookie.
    if (AJS.Cookie.read(name)) {
      // Updating checkbox state.
      $(this).prop('checked', true);
    }
  });
  // Clicking the OK button should run submit(), pop up displays all checked boxes
  $('#generate-canvas-button').click(submit);
});
function submit() {
  var checked = [];
  var targetGroupActors = [];
  var bigPictureActors = [];
  var bigPictureImpacts = [];
  var productDetailsActors = [];
  var productDetailsDeliverable = [];
  // Iterating over all checkboxes on page.
  $('input:checkbox').each(function() {
    // Getting checkbox name.
    var name = $(this).attr('name');
    // Checking checkbox state.
    if ($(this).is(":checked")) {
      // Saving checkbox name to cookie.
      AJS.Cookie.save(name, true);
    } else {
      // Remove checkbox state from cookie.
      AJS.Cookie.erase(name);
    }
    if ($(this).is(":checked")) {
      impactMapValues = $( this ).prop('id');
      impactMapActor = $( this ).prop('name');
      var value = document.getElementById(impactMapValues).value;
      if (impactMapActor == "actor-checkbox") {
        targetGroupActors.push(value);
      }
      if (impactMapActor == "impact-checkbox") {
          var result = value.split(",");
          actor_value = result[0];
          impact_value = result[1];
          bigPictureActors.push(actor_value);
          bigPictureImpacts.push(impact_value);
      }
      if (impactMapActor == "deliverable-checkbox") {
        var result = value.split(",");
        actor_value = result[0];
        deliverable_value = result[1];
        productDetailsActors.push(actor_value);
        productDetailsDeliverable.push(deliverable_value);
      }
      checked.push(value);
    }
  });
  addTotargetGroup(targetGroupActors);
  addToBigPicture(bigPictureActors,bigPictureImpacts);
  addReleaseTarget(productDetailsActors,productDetailsDeliverable);
}

试试这个方法:

// Wait until the page is completely loaded.
$(document).ready(function() {
  // Iterating over all checkboxes on page.
  $('input:checkbox').each(function() {
    // Getting checkbox name.
    var name = $(this).attr('name');
    // Checking saved cookie.
    if (AJS.Cookie.read(name)) {
      // Updating checkbox state.
      $(this).prop('checked', true);
    }
    // Attaching onchange handler.
    $(this).change(function() {
      // Checking checkbox state.
      if ($(this).is(":checked")) {
        // Saving checkbox name to cookie.
        AJS.Cookie.save(name, true);
      } else {
        // Remove checkbox state from cookie.
        AJS.Cookie.erase(name);
      }
    });
  });
});

使用viewstate概念而不是使用其他cookie逻辑

用

AJS.toInit(function ($) {
    // You can use $ instead of AJS.$ here
    ...
});

这是Atlassian的等效$(document).ready(...)，它允许在调用你的代码之前加载所有Atlassian代码。

相关文章：