使用「取消選擇全部」按鈕從本地存儲刪除複選框

Question

我試圖使用「取消選擇全部」按鈕從本地存儲刪除特定的複選框組。在小提琴中我有兩組複選框。我希望每個小組獨立於另一個工作。因此，如果我選擇說，每個組中的一個國家（即現在在本地存儲中有2個ID），那麼如果單擊一個組的「取消選擇」圖標，我希望另一個組的國家駐留在本地存儲中。此刻，一切都被消滅了。迄今爲止所有努力都失敗了任何想法，我如何才能得到這個工作？小提琴：http://jsfiddle.net/s947vgoh/

$(function() { 
 

 
    // Saving checkboxes to local-storage 
 
    var $containers = $('#CountryListBoxID_prodn, #CountryListBoxID_SECOND'); 
 

 
    $containers.on("change", "input", function() { 
 
    var $checkboxes = $(':checkbox:checked'); 
 
    var selected = $(':checkbox:checked').map(function() { 
 
     return this.id; 
 
    }).get(); 
 
    selected = '#' + selected.join(',#'); 
 
    localStorage.setItem('selected_checkboxes', selected); 
 
    console.log(localStorage.getItem('selected_checkboxes')); 
 
    }); 
 
}); 
 

 
// -------------- 
 
// TOP set of checkboxes 
 

 
$("#CountrySelectAll_ID_prodn").on('click', function() { 
 
    $('#CountryListBoxID_prodn').find("input:checkbox").prop('checked', true); 
 
    var $containers = $('#CountryListBoxID_prodn'); 
 
    localStorage.setItem('selected_checkboxes', '#' + $containers.find("input:checked").map(function() { 
 
    return this.id; 
 
    }).get().join(',#')) 
 
    console.log(localStorage.getItem('selected_checkboxes')); 
 
}); 
 

 
$("#CountrySelectNone_ID_prodn").on('click', function() { 
 
    $('#CountryListBoxID_prodn').find("input:checkbox").prop('checked', false); 
 
    localStorage.removeItem('#CountryListBoxID_prodn'); 
 
    console.log(localStorage.getItem('selected_checkboxes')); 
 
}); 
 

 

 
// -------------- 
 
// LOWER set of checkboxes 
 

 
$("#CountryAll_ID_SECOND").on('click', function() { 
 
    $('#CountryListBoxID_SECOND').find("input:checkbox").prop('checked', true); 
 
    var $containers = $('#CountryListBoxID_SECOND'); 
 
    localStorage.setItem('selected_checkboxes', '#' + $containers.find("input:checked").map(function() { 
 
    return this.id; 
 
    }).get().join(',#')) 
 
    console.log(localStorage.getItem('selected_checkboxes')); 
 
}); 
 

 
$("#CountryNone_ID_SECOND").on('click', function() { 
 
    $('#CountryListBoxID_SECOND').find("input:checkbox").prop('checked', false); 
 
    localStorage.removeItem('#CountryListBoxID_SECOND'); 
 
    console.log(localStorage.getItem('selected_checkboxes')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" /> 
 
<button type='submit' id="SelectALLCountryID_prodn"> 
 
      <i id="CountrySelectAll_ID_prodn" class="fa fa-check-square-o fa-lg" title="Select All"></i> 
 
</button> 
 
<button type='submit' id="SelectNONECountryID_prodn"> 
 
      <i id="CountrySelectNone_ID_prodn" class="fa fa-square-o fa-lg" title="Unselect All"></i> 
 
</button> 
 
<hr> 
 

 
<div id="CountryListBoxID_prodn"> 
 
    <label class="myEuropeCountries"><input type="checkbox" id="UN40" value="Austria" />Austria</label> 
 
    <label class="myEuropeCountries"><input type="checkbox" id="UN251" value="France" />France</label> 
 
    <label class="myEuropeCountries"><input type="checkbox" id="UN276" value="Germany" />Germany</label> 
 
</div> 
 

 
<br> 
 
<br> 
 
<br> 
 

 
<button type='submit' id="ALLCountryID_SECOND"> 
 
      <i id="CountryAll_ID_SECOND" class="fa fa-check-square-o fa-lg" title="Select All"></i> 
 
</button> 
 
<button type='submit' id="NONECountryID_SECOND"> 
 
      <i id="CountryNone_ID_SECOND" class="fa fa-square-o fa-lg" title="Unselect All"></i> 
 
</button> 
 
<hr> 
 

 
<div id="CountryListBoxID_SECOND"> 
 
    <label class="myEuropeCountries"><input type="checkbox" id="G80" value="Spain" />Spain</label> 
 
    <label class="myEuropeCountries"><input type="checkbox" id="G500" value="Italy" />Italy</label> 
 
    <label class="myEuropeCountries"><input type="checkbox" id="G300" value="UK" />UK</label> 
 
</div>

Answer 1

這裏是點擊一個解決方案的所有/全部刪除，只需點擊一下 - 該代碼還設置了檢查箱子的onload從localStorage的

http://jsfiddle.net/mplungjan/dso6jsnn/

由於安全設置，localStorage不在SO上工作

var chks = { 
 
    "CountryListBoxID_prodn": [], 
 
    "CountryListBoxID_SECOND": [] 
 
} 
 

 
function saveSet(id, checks) { 
 
    chks[id] = checks; 
 
    localStorage.setItem("selected_checkboxes", JSON.stringify(chks)); 
 
    console.log(id,localStorage.getItem("selected_checkboxes")); 
 
} 
 

 
$(function() { 
 

 
    var chks = localStorage.getItem("selected_checkboxes"); 
 
    if (chks) { 
 
    chks = JSON.parse(chks); 
 
    $.each(chks,function(key,val) { 
 
     $.each(val,function(_,id) { 
 
     $("#"+id).prop("checked",true); 
 
     }); 
 
    }); 
 
    } 
 

 
    $(".sel, .remove").on("click", function() { 
 
    var sel = $(this).is(".sel"), 
 
     id = $(this).data("id"), 
 
     $checks = $("#" + id).find(":checkbox"); 
 
    $checks.prop("checked", sel); 
 
    saveSet(id, sel ? $checks.map(function() { 
 
     return this.id 
 
    }).get() : []); // save all or none 
 
    }); 
 
    $(":checkbox").on("click", function() { 
 
    var $container = $(this).closest("div"); 
 
    saveSet($container.attr("id"), $container.find(":checkbox:checked").map(function() { 
 
     return this.id 
 
    }).get()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" /> 
 

 
<button type='button' class="sel" data-id="CountryListBoxID_prodn"> 
 
    <i class="fa fa-check-square-o fa-lg" title="Select All"></i> 
 
</button> 
 
<button type='button' class="remove" data-id="CountryListBoxID_prodn"> 
 
    <i class="fa fa-square-o fa-lg" title="Unselect All"></i> 
 
</button> 
 
<hr> 
 

 
<div id="CountryListBoxID_prodn"> 
 
    <label class="myEuropeCountries"> 
 
    <input type="checkbox" id="UN40" value="Austria" />Austria</label> 
 
    <label class="myEuropeCountries"> 
 
    <input type="checkbox" id="UN251" value="France" />France</label> 
 
    <label class="myEuropeCountries"> 
 
    <input type="checkbox" id="UN276" value="Germany" />Germany</label> 
 
</div> 
 

 
<br> 
 
<br> 
 
<br> 
 
<button type='button' class="sel" data-id="CountryListBoxID_SECOND"> 
 
    <i class="fa fa-check-square-o fa-lg" title="Select All"></i> 
 
</button> 
 
<button type='button' class="remove" data-id="CountryListBoxID_SECOND"> 
 
    <i class="fa fa-square-o fa-lg" title="Unselect All"></i> 
 
</button> 
 
<hr> 
 
<div id="CountryListBoxID_SECOND"> 
 
    <label class="myEuropeCountries"> 
 
    <input type="checkbox" id="G80" value="Spain" />Spain</label> 
 
    <label class="myEuropeCountries"> 
 
    <input type="checkbox" id="G500" value="Italy" />Italy</label> 
 
    <label class="myEuropeCountries"> 
 
    <input type="checkbox" id="G300" value="UK" />UK</label> 
 
</div>