LocalStorage'da dinamik olarak eklenen onay kutusu değeri nasıl kaydedilir?

Question

Onay kutusu değerimi dinamik olarak kaydetmek istiyorum. Belirli bir kutuyu işaretlediğimde, tüm onay kutuları işaretlidir. Hedefi hedefledim, ancak çalışmadı. Herhangi bir fikir? 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

Önerim kimlikleri kaldırılması ve ayrı ayrı onay kutularını durumunu kaydetmek için kaçınarak dayanmaktadır: Güncellenmiş

senin 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

kendilerine özgü kimliklerini kullanarak onay kutularını kaydedin.

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

Sonra geri alabilirsiniz: Burada

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"); 
    } 
} 

olursa olsun dinamik veya manuel hepsi kimlikleri sizin onay kutularını oluşturmak olsun JSFiddle https://jsfiddle.net/hc09LpfL/2/

olduğunu.

Kemanınızda, bu onay kutularını oluşturan koddur. Sanırım bu kısmı, hepsi için aynı kimliği ve ismi atadığınız için anlamıyorsunuz.

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