滑軌從通過jQuery所有複選框獲取狀態，並將其發送到控制器

Question

到目前爲止，我有以下設置：

我的複選框被聲明如下：

<label id="cb2" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1"> 
    <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input"> 
    <span class="mdl-checkbox__label">Meal</span> 
</label> 

而且我有以下的jQuery代碼：

<script> 
    $(document).ready(function() { 
    $("input[type='checkbox']").change(function() { 
     $("#change_me").html("<%= j render(partial: 'dynamic_test') %>"); 
    }); 
    }); 
</script> 

所以只要我選中或取消選中複選框我想所有的複選框的檢查屬性，並將它們發送到我的控制器（阿賈克斯？），在這裏我再要執行一些選擇查詢和將其渲染爲「dynamic_test」。有人可以給我一個關於如何實現數據發送到我的控制器的想法。

編輯：

我_dynamic_test.html.erb包含：

Some Test! 
<%= @check_box_val %> 

EDIT2：

我得到了它這樣的工作：

<script> 
$(document).ready(function() { 
$("input[type='checkbox']").change(function() { 
    var selected_checkbox_val = []; 
    $("input[type='checkbox']").each(function() { 
     if (this.checked) { 
      selected_checkbox_val.push(this.getAttribute("name")); 
     } 
    }); 
    $.ajax({ 
     url: "/meals/dynamic_test", 
     type: "POST", 
     data: { 
     value: selected_checkbox_val 
     }, 
     dataType: 'script' 
    }); 
    }); 
}); 
</script> 

如果你看到一個更好的方式，我願意改變。

Answer 1

這是你應該怎麼做

<script> 
$("input[type='checkbox']").change(function() { 
    var selected_checkbox_val = $(this).val(); 
    $.ajax({ 
    url: "/meals/dynamic_test", 
    type: "POST", 
    data: { 
     value: selected_checkbox_val 
    }, 
    dataType: 'script' 
    }); 
} 
</script> 

在控制器dynamic_test方法

def dynamic_test 
    @check_box_val = params[:value] 
    respond_to do |format| 
    format.js 
    format.html 
    end 
end 

，你應該有一個名爲dynamic_test.js.erb用下面的代碼

$("#change_me").html("<%= j render(partial: 'dynamic_test', locals: {check_box_val: @check_box_val}) %>"); 

而且您應該爲此方法定義路線

post "/meals/dynamic_test" => "meals#dynamic_test" 

注：

您可以更改部分的名稱，以避免主模板和局部模板之間的混淆。