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>

＆p;经典＆＃34;第一次提交的put＆＃39d params已选中

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

＆p;经典＆＃34;第一次提交的put＆＃39d params已经检查过＆＃34;现代＆＃34;已选中

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[]"

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

1 个答案: