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保存您的复选框。

$('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和名称。

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

Answer 2

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

我更新了您的Fiddle

<div class="panel panel-primary">
<div class="panel-heading" ng-click="vm.onClickHeader()">
    <span ng-hide="vm.collapsed" style="padding-top: 8px">
        <span ng-click="vm.onClickBtn()"><i class="fa fa-chevron-left fa-2x"></i></span>
    </span>
</div>

<div class="panel-body" ng-hide="vm.collapsed" style="padding: 2px; padding-right: 4px">
    <div>Click the button above to hide me!</div>
</div>
</div>


var app = angular.module('app');

app.directive('myPanel', MyPanel);
function MyPanel() {
    return {
        templateUrl: 'my-panel.html',
        restrict: 'E',
        controller: MyController,
        controllerAs: 'vm',
        scope: true
    };
};


function MyController() {
    this.collapsed = false;

    this.onClickBtn = function onClickBtn() {
        alert('click!')
    };

    this.onClickHeader = function(evt) {
        this.collapsed = !this.collapsed;
    }

}

$(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;
  });
});

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

2 个答案: