如何在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/

不管你是否動態或手動它們都具有IDS創建複選框。

在你的小提琴中，這是生成複選框的代碼。我想你不明白這一部分，因爲你正在爲它們分配相同的ID和名稱。

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