按ID全选/取消全选页面中的所有复选框

Question

I have two blocks with checkboxes. I'm trying to check this particular checkboxes with JS.

 <%= hidden_field_tag "user[roles][]" %>
    <% User.valid_roles.map{|c| {name: c, id: User.mask_for(c)} }.each do |role| %>
      <%= check_box_tag "user[roles][]", role[:name], user.has_role?(role[:name]), id: "user_role_#{role[:id]}" %>
      <%= label_tag "user_role_#{role[:id]}", role[:name].to_s.titleize %><br/>
      <% end %>




$('#selectAll').click(function() {
   if(this.checked) {
       $(':checkbox').each(function() {
           this.checked = true;                        
       });
   } else {
      $(':checkbox').each(function() {
           this.checked = false;                        
       });
   } 
});

Answer 1

Something like this should work:

$('#selectAll').on('change', function(){
  var checkboxes   = $('input[id^="employer_"]');
  var checkedValue = !!this.checked;

  checkboxes.prop('checked', checkedValue);
});

Here is a fiddle to demonstrate: http://jsfiddle.net/f5nx0czv/

With jQuery you can set a property/attribute en masse, no need to iterate over the collection.