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と名前を割り当てているので、あなたがこの部分を理解していないと思います。

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