Не снимать флажок после обновления страницы - PullRequest
Новая
       7

Не снимать флажок после обновления страницы

1 голос
/ 29 мая 2020

У меня есть флажки, как показано ниже, в моем приложении rails 

<% if field["field_type"] == "checklist"%>
 <% templat = @custom_templates.select{|s| s["id"] == m["startup_field_template_id"]}.first%>
 <small>
   <% vals = field["options"].to_s.gsub(/[\[\"\]]/, '').split(',') %>
   <% vals.each do |v| %>
   <% if templat["option_multi"]%>
     <input type="checkbox" />&nbsp;&nbsp;&nbsp; <%= v %><br/>
   <% else %>
     <input type="checkbox" class="check" />&nbsp;&nbsp;&nbsp; <%= v %><br/>
   <% end %>
   <% end %>
 </small>
<% else %>
 n/a
<% end %>

Я использовал приведенный ниже код, чтобы оставить установленный флажок, установленный после обновления страницы 

<sript>
$(function(){
var test = localStorage.input === 'true'? true: false;
$('input').prop('checked', test || false);
});

$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});
</script>

Но он сохраняет все проверки флажки установлены после обновления страницы. как я могу это решить?

1 Ответ

1 голос
/ 29 мая 2020

Селектор, который вы используете, установит все состояния ввода флажка, поэтому вам нужно установить атрибут checked для каждого ввода индивидуально, также не лучший способ использовать localStorage - использовать setItem и getItem() методы:

вот фрагмент (здесь он не будет работать, потому что его песочница проверяет скрипку) и скрипка : 

$(function(){
  var test = localStorage.input === 'true'? true: false;
  $('input').each(function(i, el) {
   //console.log(localStorage.input);
   test = (localStorage.getItem(`input-${i}`) === 'true') ? true: false;
  	$(el).prop('checked', test || false);
  }); 
  
});
$('input').on('change', function() {
    localStorage.setItem(`input-${$(this).index('input')}`, $(this).is(':checked'));
  });
<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<input type="checkbox" class="check" /> checkbox
<input type="checkbox" class="check" /> checkbox
<input type="checkbox" class="check" /> checkbox
<input type="checkbox" class="check" /> checkbox
<input type="checkbox" class="check" /> checkbox
...