Check All/None Checkboxes Using MooTools

Discussion

1. andrei009

   you can do that more simple

   $('ucuc').addEvent('click',function(){
       do_check = $(this).checked;
       $$('.check-me').each(function(el) { el.checked = do_check; });
   });
   
2. Elad Ossadon

   $$('.check-me').each(function(el) { el.checked = do_check; });  
   

   could be

   $$('.check-me').set('checked',do_check)  
   

   Since all Element methods can be applied over instances of Elements class ($$ returns it). Those methods apply loops internally (see Elements.multi)
   :)
3. david

   Thanks for the tips guys!
4. jorge

   it would be interesant do this example with pagination, keeping the marked selection during page navigation. It could be with cookies…
5. John Boyd

   Finally someone who can make check all work with a name=”xyz[]”. Only issue is I tried to input your code and got error: “object doesn’t support this property or method” and “style is null or not an object”.

   What did I miss here?
6. Farao

   Very nice work!

   One question: what would you do if you have multiple tables, each inside its own form, and you want to check/uncheck only the checkboxes inside each particular table?
7. Adam

   Just incase anybody wants to do it without putting class names on all your checkboxes. Instead, stick an id on a html element that surrounds them all.
   This is probably the answer to “Farao’s” question.

   Set var yourContainer to be the id of the surrounding html element.
   Example, if your container had an id of “monkey” then var yourContainer = “#monkey”. This way it only targets checkboxes in that area. It’s a far better global solution than putting a class on each checkbox.

   This method takes the first checkbox found and uses it as a reference for the others to follow, to avoid mismatch checking.

   $$(yourContainer+" input[type=checkbox]").each(function(el,c){
       this.cbp = c==0?(el.checked?false:true):this.cbp;
       el.checked = this.checkMe;
   });
   

   Simplez.
8. Adam

   @Adam:
   My code above is flawed,ignore it, or David, please delete it :)

   Here’s the code that works (shorter too!)

   @param container => The mootools representation of the element id that all the checkboxes are in. Eg “#myElementId”
   @param obj => Set to ‘this’. That’s because the onclick event should be on the checkbox that is the SelectAll/None, so ‘this’ refers to the current state of this checkbox.

   function toggleCheckboxes(container,obj){
   	$$(container+" input[type=checkbox]").each(function(el){
   		el.checked = obj.checked;
   	});
   }
9. Hevyweb

   You should write $$(“input[type$=checkbox]”)… tra-la-la
• David Walsh

  Good suggestion, but that may get elements I don’t want, so maybe:

  $$(“input[type$=checkbox].check-me“)

  This post is quite old, maybe I should update it.