如何在localStorage中保存动态添加的复选框值？

Question

我想动态保存我的复选框值。当我检查一个特定的复选框时，所有复选框都被选中。使用目标但没有工作。有任何想法吗？ JSFIDDLE

 var data = localStorage.getItem("checkbox");
    if (data) {
       $("input[name='checkbox-name']").attr("checked", "checked");
    }
    
  $(document).on('change', "input[name='checkbox-name']", function (e) {
     var target = $(e.target );
    if (target.is(":checked")) {
        localStorage.setItem("checkbox", 1);
    } else {
         localStorage.removeItem("checkbox");
    }
});

Answer 1

我的建议是基于删除 ID 并避免单独保存复选框状态：

我更新了你的Fiddle

$(document).on('click', '.delete', function () {
  var parent = $(this).parent();
  parent.remove();

  var list = $("#list").html();
  localStorage.setItem("list", list);
  return false;
});

$(document).on('change', "input[name='checkbox-name']", function (e) {
  if ($(this).prop('checked')) {
    $(this).attr('checked', 'checked');
  } else {
    $(this).removeAttr('checked');
  }
  var list = $("#list").html();
  localStorage.setItem("list", list);
});

$(function () {
  if (localStorage.getItem('list')) {
    $('#list').html(localStorage.getItem('list'));
  }

  $("#add").click(function () {
    var userList = $('#textarea').val();
    $('#textarea').val('');
    var newitem = '<p>' + '<input type="checkbox" name="checkbox-name"/> ' + userList + '<input type="submit" value="X" class="delete"/></p>';
    $('#list').append(newitem);

    var list = $("#list").html();
    localStorage.setItem('list', list);
    return false;
  });
});

<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>

<input type="text" id="textarea" placeholder="Write here..."/>
<button id="add">Add</button>

<div id="list"></div>

Answer 2

使用其唯一 ID 保存您的复选框。

$('input:checkbox').on('change', function(e) {
     var checkboxId = $(this).attr('id');
     if ($(this).is(":checked")) {
       localStorage.setItem(checkboxId, 1);
     } else {
       localStorage.removeItem(checkboxId);
     }
});

然后你可以检索它：

for (var i = 0, len = localStorage.length; i < len; i++) {
    var key = localStorage.key(i);
    var value = localStorage[key];
    if (value == 1) {
      $('#' + key).attr("checked", "checked");
    }
}

这里是 JSFiddle https://jsfiddle.net/hc09LpfL/2/

无论您是动态创建复选框还是手动创建复选框，它们都有 id。

在您的小提琴中，这是生成复选框的代码。我猜你不理解这部分，因为你为它们分配了相同的 id 和 name。

var newitem = '<p>' + '<input type="checkbox" name="checkbox-name" id="checkbox"/> ' + userList + '<input type="submit" value="X" id="delete"  class="delete"/></p>';