Question

本地存储适用于各个国家/地区选择的ID，但是当我点击“全选”图标时，我希望所有国家/地区ID都传递到本地存储。不幸的是没有通过。已经花了好几个小时。谁知道我怎么能让这个工作？小提琴：http://jsfiddle.net/4puuhs2x/

// Saving checkboxes to local-storage
$(function() {

  // Save checkbox status to local-storage
  var $containers = $('#CountryListBoxID_prodn');

  $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('setting selected ids: ', selected);
  });
});


$("#CountrySelectAll_ID_prodn").on('click', function() {
  $('#CountryListBoxID_prodn').find("input:checkbox").prop('checked', true);
});

$("#CountrySelectNone_ID_prodn").on('click', function() {
  $('#CountryListBoxID_prodn').find("input:checkbox").prop('checked', false);
});

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


<button type='submit' id="SelectALLCountryID_prodn" class="sbButtonIconStyle1">
    <i id="CountrySelectAll_ID_prodn" class="fa fa-check-square-o fa-lg" 
    title="Select All"></i>
    </button>
<button type='submit' id="SelectNONECountryID_prodn" class="sbButtonIconStyle1">
    <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>

Answer 1

你离我太远了。

您只需在select all click

上设置localStorage即可

localStorage.setItem('selected_checkboxes', '#' + $containers.find("input:checked").map(function() {
      return this.id;
    }).get().join(',#'))

使用一段代码http://jsfiddle.net/4puuhs2x/2/

查看更新后的jsFiddle

Answer 2

您需要触发更改事件。

试试这个

$("#CountrySelectAll_ID_prodn").on('click', function()
{ 
   $('#CountryListBoxID_prodn').find("input:checkbox").prop('checked',true);
   $('#CountryListBoxID_prodn').find("input:checkbox").trigger('change');
});

$("#CountrySelectNone_ID_prodn").on('click', function()
{ 

  $('#CountryListBoxID_prodn').find("input:checkbox").prop('checked',false);
  $('#CountryListBoxID_prodn').find("input:checkbox").trigger('change');
});

Answer 3

你的id选择器错了。你需要使用按钮ID来选择。

$("#SelectALLCountryID_prodn").on('click', function()
{ $('#CountryListBoxID_prodn').find("input:checkbox").prop('checked',true);
});

$("#SelectNONECountryID_prodn").on('click', function()
{ $('#CountryListBoxID_prodn').find("input:checkbox").prop('checked',false);
});

http://jsfiddle.net/4puuhs2x/3/

“选择所有复选框”不会将复选框发送到本地存储

3 个答案: