check/uncheck all with collection_check_boxes

Question

I'm using simple_form_for passing only a symbol instead of a model to the form so I can send custom parameters back to the controller. I managed to default the checkboxes to all selected by default.

What I can't figure out is how to add a select/unselect all checkbox. I imagine I need some JS in there, but I don't know which attribute I have to change the value.

I checked in the browser console if any attributes change when I check/uncheck any item but no attributes in the input element change. The <form> element does shine when I check/uncheck an item though. That's how close to a clue I could come to.

= simple_form_for :mass_unassignment, url: admin_merchant_holiday_path(@merchant), method: :post do |f|
    - if @jobs.present?
      %h3 Cleaning
      %table
        %thead
          %tr
            %td= check_box_tag :mass_select
            %td Id
            %td Date
            %td Customer
        %tbody
          = f.collection_check_boxes :jobs, @jobs, :id, :start_at, checked: @jobs.map(&:id) do |el|
            - job = el.object
            %tr
              %td= el.check_box checked_value: 1
              %td= link_to el.object.id, admin_job_path(job)
              %td= job.start_at.strftime('%e %b %y – %I:%M%P')
              %td= link_to job.customer.full_name, admin_customers_path(job.customer)

Answer 1

This seems to be more of a Javascript question than a RoR question. From the link given in the comment by @jdgray, you can use this:

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}

Or, if you are using jQuery, then you can do something like this:

$('#all-check').change(function(){
    if ($(this).prop('checked')){
        $('form :checked').each(function(){
            $(this).prop('checked', true);
        });
    }else{
        $('form :checked').each(function(){
            $(this).prop('checked', false);
        });
    }
});