Ruby on Rails在表单提交后保持复选框

时间:2016-06-18 03:16:08

标签: javascript ruby-on-rails ruby

我正在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>

我也会将评论中的代码放在这里,因为它没有显示正确

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

1 个答案:

答案 0 :(得分:0)

就在这里:

  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)
});