1<%= search_form_for @search, url: experiences_path do |f| %>
2  <div class="position-relative">
3    <div class="row column-search">
4      ...
5      ...
6      ...
7
8      <!-- Budget Range Collection Check Boxes -->
9      <div class="border-bottom" id="filter-tour-budget">
10        <div class="d-flex justify-content-between ">
11          <span>Tour Budget</span>
12          <a class="font-size-12 clear-all" data-clear="filter-tour-budget">
13            <div id="clearAllBudget">clear all</div>
14          </a>
15        </div>
16        <div class="checkbox-box" id="budget-checkbox">
17          <%= f.collection_check_boxes :price_in,
18                                       [['Below RM100',     1..100],
19                                        ['RM101 - RM300',   101..300],
20                                        ['RM301 - RM500',   301..500],
21                                        ['RM501 and above', 501..1000]],
22                                        :second, :first,
23                                        checked: "#{(params[:q][:price_in] rescue nil)}" do |b| %>
24            <div class="form-check d-flex">
25              <%= b.check_box class: 'custom-control-input budget', name: 'q[price_in]' %>
26              <%= b.label class: 'custom-control-label' %>
27            </div>
28          <% end %>
29        </div>
30      </div>
31      <!-- END Budget Range Collection Check Boxes -->
32
33      <!-- Duration Collection Check Boxes -->
34      <div class="border-bottom" id="filter-tour-duration">
35        <div class="d-flex justify-content-between ">
36          <span>Tour Duration</span>
37          <a class="font-size-12 clear-all" data-clear="filter-tour-duration">
38            <div id="clearAllDuration">clear all</div>
39          </a>
40        </div>
41        <div class="checkbox-box" id="duration-checkbox">
42          <%= f.collection_check_boxes :duration_id_in,
43                                       [['< 4 hours',   1..8],
44                                        ['4 - 6 hours', 8..12],
45                                        ['> 6 hours',   12..24]],
46                                        :second, :first,
47                                        checked: "#{(params[:q][:duration_id_in] rescue nil)}" do |b| %>
48            <div class="form-check d-flex">
49              <%= b.check_box class: 'custom-control-input duration', name: 'q[duration_id_in]' %>
50              <%= b.label class: 'custom-control-label' %>
51            </div>
52          <% end %>
53        </div>
54      </div>
55      <!-- END Duration Collection Check Boxes -->
56
57    </div>
58  </div>
59
60  <div>
61    <%= f.submit "Check Availability", class: "btn btn-primary" %>
62  </div>
63<% end %>

1name: 'q[price_in]'

1name: 'q[duration_id_in]'

1name: 'q[price_in][]'

1name: 'q[duration_id_in][]'

1...
2...
3
4<script>
5  // ...
6  // ...
7
8  // For clear all checkboxes on Duration
9  $('#clearAllDuration').on("click", function(){
10    var clearCheckBox = $('input[class="custom-control-input duration"]');
11    clearCheckBox.prop("checked",false);
12  });
13
14  // For clear all checkboxes on Budget
15  $('#clearAllBudget').on("click", function(){
16    var clearCheckBox = $('input[class="custom-control-input budget"]');
17    clearCheckBox.prop("checked",false);
18  });
19
20  // For Duration only able to select on checkbox and uncheck other
21  $('input.custom-control-input.duration').on('change', function() {
22    $('input.custom-control-input.duration').not(this).prop('checked', false);
23  });
24
25  // For Budget only able to select on checkbox and uncheck other
26  $('input.custom-control-input.budget').on('change', function() {
27    $('input.custom-control-input.budget').not(this).prop('checked', false);
28  });
29
30  // ...
31  // ...
32</script>