Javascript RubyonRails在表单提交后保持选中复选框

我正在Rails中创建一个应用程序，您可以从不同类别中选择想要显示的内容，我使用一个表单和复选框来完成这项工作，但在呈现页面后，我似乎无法使复选框保持选中状态。我的控制器：

def select
@grants = Array.new
@cat = Array.new

@has = params[:select]

@has.each do |key, value|
  if value != 'no'
    @cat.push(value)
  end
end

  if @cat != nil
  @cat.each do |cat|
    @grants = @grants.concat(sortbycategory(Grant.all, cat))
  end
  if params[:obprice] == 'yes'
    arrangebyprice(@grants)
  elsif params[:obdate] == 'yes'
    arrangebydate(@grants)
  end
  @grants = Kaminari.paginate_array(@grants).page(params[:page]).per(25)
  render :partial => 'select', :layout => 'application'
else
  puts 'something went wrong'
end
end

这是我在视图中使用的复选框之一

<form action="/allgrant/select" method="post">
  <% unless are_grants?("agriculture") == false %>
 <li>
<p id = 'shifter'>
 <input name="select[agriculture]" type="hidden" value="no" />
 <label>

 <input type="checkbox" name = "select[agriculture]" value = 'agriculture'/>
 Agriculture

</label>
 </p>
 </li>
<br>

农业

我找到了这个javascript，并尝试使用和修补它，但当我使用它时，它会选中所有复选框或不选中任何复选框

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

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

$（函数（）{
var test=localStorage.input=='true'？true:false；
$（'input'）.prop（'checked'，test）；
});
$（'input'）。在（'change'，function（）上{
localStorage.input=$（this）.is（':checked'）；
log（$（this）.is（':checked'）；
});

我将把我的代码也放在这里，因为它没有正确显示

<input type="checkbox" name = "select[agriculture]" value = 'agriculture' <%= @cat.include? 'agriculture' ? "checked=checked" : "" %> />

就在这里：

  var test = localStorage.input === 'true'? true: false;
  $('input').prop('checked', test);

这就是为什么要选中所有复选框

您有一个全局变量存储在

localStorage.input

中

调用

$（'input'）.prop（'checked'，test）

时，选择所有输入并应用属性

在

localStorage

中存储状态似乎是一种明智的方法，但是您需要单独存储每个复选框的状态，并且需要将属性单独应用于每个复选框

在以下示例中，每个复选框输入的HTML标记都应有一个id属性，该属性是唯一标识符：

$("input[type='checkbox']").forEach(function(node){
  var $input   = $(node),
      selector = $input.attr("id")
  if (localStorage[selector]) {
    $("#" + selector ).prop("checked", true)
  }
})

$("input[type='checkbox']").on('change', function(e) {
  var $input    = $(e.currentTarget),
      selector  = $input.attr("id"),
      isChecked = $input.is(':checked') === 'true'
      nextState = !isChecked
  localStorage[selector] = nextState
  console.log($input.attr("id") + " is checked? " + nextState)
});

就在这里：

  var test = localStorage.input === 'true'? true: false;
  $('input').prop('checked', test);

这就是为什么要选中所有复选框

您有一个全局变量存储在

localStorage.input

中

调用

$（'input'）.prop（'checked'，test）

时，选择所有输入并应用属性

在

localStorage

中存储状态似乎是一种明智的方法，但是您需要单独存储每个复选框的状态，并且需要将属性单独应用于每个复选框

在以下示例中，每个复选框输入的HTML标记都应有一个id属性，该属性是唯一标识符：

$("input[type='checkbox']").forEach(function(node){
  var $input   = $(node),
      selector = $input.attr("id")
  if (localStorage[selector]) {
    $("#" + selector ).prop("checked", true)
  }
})

$("input[type='checkbox']").on('change', function(e) {
  var $input    = $(e.currentTarget),
      selector  = $input.attr("id"),
      isChecked = $input.is(':checked') === 'true'
      nextState = !isChecked
  localStorage[selector] = nextState
  console.log($input.attr("id") + " is checked? " + nextState)
});

---

默认情况下是否应选中该复选框？在这种情况下，您可以对inputNo执行

checked:“checked”

，我不希望所有的选项都被选中，只希望他们选中那些选项，这样他们就可以看到他们选择了什么。我确实试过这样做，但当我提交表格时，它仍然没有被检查——只是一个简单的想法。实际上，您正在使用两个名为

select[agriculture]

（一个隐藏，另一个是复选框）的输入。要选中/取消选中复选框，您必须以某种方式管理

checked

属性。隐藏值用于当复选框未选中时，它将传入“否”，而不是什么都不传入。它会在单击时检查和取消选中，并传入正确的字符串，我只是无法让它在页面呈现后保持检查状态，检查属性是否有任何东西可以控制该方面？是的。您必须在视图中添加一些逻辑，如

。默认情况下是否应选中该复选框？在这种情况下，您可以对inputNo执行

checked:“checked”

，我不希望所有的选项都被选中，只希望他们选中那些选项，这样他们就可以看到他们选择了什么。我确实试过这样做，但当我提交表格时，它仍然没有被检查——只是一个简单的想法。实际上，您正在使用两个名为

select[agriculture]

（一个隐藏，另一个是复选框）的输入。要选中/取消选中复选框，您必须以某种方式管理

checked

属性。隐藏值用于当复选框未选中时，它将传入“否”，而不是什么都不传入。它会在单击时检查和取消选中，并传入正确的字符串，我只是无法让它在页面呈现后保持检查状态，检查属性是否有任何东西可以控制该方面？是的。您必须在视图中放入一些逻辑，如

。