jQuery提交方法不提交整个表单

Question

我过滤面板用于过滤搜索结果。当用户单击复选框时，ajax 会触发提交。但是，它似乎只提交了该复选框的值，而不是之前可能单击的其他复选框。

任何帮助将不胜感激。

JS

$("#filter_menu2 input:checkbox").click ->
    console.log $(this).parents('form')
    $(this).prop('checked', true)
    $(this).parents('form').submit()
    return

search.js.erb

$("#products").html("<%= escape_javascript(render(:partial=>'new_shop/shop_search_results')).html_safe %>")

复选框

<ul>
            <%= form_tag "/search", id: "styles", method: :get, remote: true do %>
                <% @styles.each do |style| %>
                    <li>
                      <label>
                        <%= check_box_tag "search", style.name.downcase, nil, id: style.name.downcase, rel: style.name.downcase %>
                        <%= style.name %>
                      </label>
                    </li>
                <% end %>
            <% end %>
          </ul>



<form accept-charset="UTF-8" action="/search" data-remote="true" id="styles" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
                    <li>
                      <label>
                        <input id="classic" name="search" rel="classic" type="checkbox" value="classic" />
                        Classic
                      </label>
                    </li>
                    <li>
                      <label>
                        <input id="modern" name="search" rel="modern" type="checkbox" value="modern" />
                        Modern
                      </label>
                    </li>
                    <li>
                      <label>
                        <input id="contemporary" name="search" rel="contemporary" type="checkbox" value="contemporary" />
                        Contemporary
                      </label>
                    </li>
                    <li>
                      <label>
                        <input id="vintage" name="search" rel="vintage" type="checkbox" value="vintage" />
                        Vintage
                      </label>
                    </li>
                    <li>
                      <label>
                        <input id="urban" name="search" rel="urban" type="checkbox" value="urban" />
                        Urban
                      </label>
                    </li>
                    <li>
                      <label>
                        <input id="mid-century" name="search" rel="mid-century" type="checkbox" value="mid-century" />
                        Mid-Century
                      </label>
                    </li>
                    <li>
                      <label>
                        <input id="traditional " name="search" rel="traditional " type="checkbox" value="traditional " />
                        Traditional 
                      </label>
                    </li>
</form>

选中“经典”时第一次提交的 puts 参数

params = {"utf8"=>"✓", "search"=>"classic", "controller"=>"new_shop", "action"=>"search"}

当“经典”已经被选中并且“现代”被选中时，第一次提交的 puts 参数

params = {"utf8"=>"✓", "search"=>"modern", "controller"=>"new_shop", "action"=>"search"}

Answer 1

我认为这会对您有所帮助，但请随时提出更多问题 - http://jsfiddle.net/jayblanchard/UwLAS/

$("#styles :checkbox").click(function () {
    $('#styles :checkbox:checked').each(function() {
        console.log( $(this).val() );
    });
    $('#styles').submit();
});

此外，我刚刚注意到您所有的复选框都带有相同的名称 -

name="search"

因为您可以选择此复选框的多个倍数，所以您应该将它们命名为一个数组 - 当收到它们时，您将在服务器端将它们作为一个数组处理：

name="search[]"