2016-06-18 60 views
1

我在Rails中創建一個應用程序,您可以從不同的類別中選擇要顯示的內容,我使用表單和複選框來完成此操作,但我無法讓複選框在渲染頁面後保持檢查狀態。我的控制器:Ruby on 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

上檢查:'checked''不,我不希望所有人都檢查他們選擇的人,以便他們可以看到他們選擇的東西。我曾嘗試過這樣做,但當我提交表格 – John

+0

時,仍然沒有檢查。只是一個快速的想法。實際上,你使用兩個輸入名稱爲'select [農業]'(一個隱藏的和其他複選框)。要檢查/取消選中複選框,您必須管理'checked'屬性。 – mrlew

回答

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) 
}); 
相關問題