Question

我试图使用＆＃34;取消全选＆＃34;用于从本地存储中删除特定复选框组的按钮。在小提琴我有两组复选框。我希望每个小组独立工作。因此，如果我选择说，每个组中的一个国家/地区（意味着现在存在2个本地存储空间中的ID），那么如果我点击“取消选择”＆＃39;一组的图标，我希望另一组的国家在本地存储中保持。目前一切都被消灭了。迄今为止所有努力都失败了我有什么想法可以让这个工作吗？小提琴：http://jsfiddle.net/s947vgoh/

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

这是一个单击全部/全部删除的解决方案，单击 - 该代码还设置了来自localStorage的复选框onload

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>

使用＆＃39;取消全选＆＃39;从本地存储中删除复选框按键

1 个答案: