我正在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" : "" %> />
答案 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)
});